Овај чланак ће пружити процедуру за стезање текста у Таилвинд.
Како спојити текст на одређени број редова?
Класа стезања линија у Таилвинд-у ограничава садржај текста у блоку на одређени број редова. На овај начин, блок текста ће сакрити текст након броја редова наведених у класи. Може се користити на веб страници да покаже кориснику да постоје неке текстуалне информације или да сакрије сав непотребан текст како би се избегло засићење на веб страници.
Синтакса
Синтакса доле дата је у „ класа ” атрибут елемента за примену стезања линије:
У горе дефинисаној синтакси, корисник може да користи бројеве из „ 1 до 6 ” за коришћење подразумеваних класа стезања линија. На пример, „ лине-цламп-1 ” класа неће дозволити да садржај текста прелази један ред.
Хајде да разумемо концепт класе „лине-цамп“ кроз неке примере.
Пример 1: Користите класу Лине Цламп да бисте ограничили садржај на одређени број линија
Хајде да ограничимо садржај текста на три реда користећи класу стезања линија у Таилвинд-у као што је урађено у наставку:
< див класа = ' роундед-лг флек јустифи-центер бг-слате-200 м-5 п-4' >
< стр класа = ' лине-цламп-3 в-72' > Ово је пример параграфа. Биће видљив само за 3 линије. Сав садржај након њега ће постати скривен. Ово је због класе стезања линије у Таилвинд-у. < / стр >
< / див >
Објашњење горњег кода је следеће:
- А “ див ” елемент се креира са заобљеним угловима помоћу „ заобљен-лг ' класа. Обезбеђује маргину и допуну користећи „ м-{број} ” & “ п-{број} ” класе.
- Затим, елемент у елементу див је центриран помоћу „ јустифи-центар ” класа и “ флек ” класа креира контејнер који ће садржати подређени елемент див.
- „ бг-{цолор}-{нумбер} ” класа поставља боју позадине елемента див.
- А “ <п> ” се креира ознака која садржи текстуални садржај. Обезбеђена је фиксна ширина помоћу „ в-{број} ' класа.
- Коначно, садржај текста „ стр ” елемент је ограничен на три реда користећи „ лине-цламп-3 ' класа.
Излаз
У излазу се може видети да је садржај текста који је премашио наведено ограничење од три реда сакривен:
Пример 2: Користите класу Лине Цламп са подразумеваним стањима у Таилвинд
Таилвинд обезбеђује различита подразумевана стања за елемент који се може користити да би изглед дизајна био динамичнији. Програмер може да користи било коју класу Таилвинд са овим стањима да обезбеди специфицирано својство дизајна елементу кад год се то стање постигне. Слично томе, класа „лине-цламп” се такође може користити са овим подразумеваним стањима Таилвинд.
Синтакса за коришћење класе „лине-цламп“ са стањем у Таилвинд-у је дата у наставку:
{ држава } : лине-цламп- { број }Постоје три подразумевана стања која су описана на следећи начин:
- лебдети: То је стање елемента када корисник пређе курсором миша преко њега.
- фокус: То је стање када је елемент у фокусу. На пример, корисник се креће до елемента притиском на тастер „таб“.
- активно: Стање када корисник активира елемент.
У доњој демонстрацији, све је идентично претходном примеру. Једина разлика је у томе што класа стезања линија има „ лебдети ' држава:
< див класа = ' роундед-лг флек јустифи-центер бг-слате-200 м-5 п-4' >< стр класа = ' ховер:лине-цламп-3 в-72' > Ово је пример параграфа. Биће видљив само за 3 линије. Сав садржај након њега ће постати скривен. Ово је због класе стезања ужета у Таилвинд-у. < / стр >
< / див >
Имајте на уму да „ <п> ” класа обезбеђује “ ховер:лине-цламп-3 ” која ће ограничити текстуални садржај на три реда кад год корисник пређе курсором миша преко оквира за садржај.
Излаз
У доњем излазу се може видети да се својство стезања линије примењује када курсор миша лебди изнад блока:
Пример 3: Користите класу Лине Цламп са тачкама прекида
Тачке прекида су медијски упити у Таилвинд-у који помажу корисницима да креирају респонзивни изглед дизајна. Таилвинд обезбеђује пет подразумеваних тачака прекида са унапред дефинисаним минималним ширинама. Програмер такође може да користи класу стезања линија са овим тачкама прекида.
Синтакса за коришћење класе за стезање линија са тачкама прекида је следећа:
{ префикси тачке прекида } : лине-цламп- { број }„Префикси тачке прекида“ поменути у горњој синтакси су следећи:
- см: Ова тачка прекида има минималну ширину од 640 пиксела.
- доктор медицине: Ова тачка прекида има минималну ширину од 768 пиксела.
- лг: Ова тачка прекида има минималну ширину од 1024 пиксела.
- кл: Ова тачка прекида има минималну ширину од 1280 пиксела.
- 2кл: Ова тачка прекида има минималну ширину од 1536 пиксела.
У доле наведеној демонстрацији, „ стр ” елемент има различите класе стезања линија на различитим тачкама прекида. Ово ће променити својство стезања линије текстуалног блока кад год се достигне нова тачка прекида:
< див класа = ' роундед-лг флек јустифи-центер бг-слате-200 м-5 п-4' >< стр класа = ' лине-цламп-1 лг:лине-цламп-3 мд:лине-цламп-2 см:лине-цламп-1 в-72' > Ово је пример параграфа. Биће видљив само за 3 линије. Сав садржај након њега ће постати скривен. Ово је због класе стезања ужета у Таилвинд-у. < / стр >
< / див >
Елемент п је подразумевано опремљен класом „лине-цламп-1“. Међутим, садржај текста у елементу „п“ биће ограничен на један ред за „ см ” тачка прекида, два реда за „ доктор медицине ” тачка прекида и три реда за „ лг ” тачка прекида.
Излаз
Из излаза је јасно да се својство лине-цламп текстуалног блока мења како се величина екрана мења:
Демонстрирали смо процедуру за спајање текста на одређени број редова у Таилвинд-у.
Закључак
Класа спајања линија у Таилвинд-у ограничава текстуални садржај елемента на одређени број редова. Класа „лин-цламп-{нумбер}” се користи као синтакса за стезање текста на ограничене редове. Класа спајања линије може се користити са унапред дефинисаним тачкама прекида и варијантама стања у Таилвинд-у. Овај чланак је дао процедуру за стезање текста на одређени број редова.