Dit artikel beschrijft de procedure voor het vastklemmen van de tekst in een Tailwind.
Hoe kan ik tekst op een specifiek aantal regels klemmen?
De klasse Line-Clamping in Tailwind beperkt de tekstinhoud in een blok tot een bepaald aantal regels. Door dit te doen, verbergt het tekstblok de tekst na het aantal regels dat in de klasse is opgegeven. Het kan op een webpagina worden gebruikt om de gebruiker te laten zien dat er tekstinformatie is of om alle onnodige tekst te verbergen om verzadiging op de webpagina te voorkomen.
Syntaxis
De hieronder gegeven syntaxis wordt gegeven in de “ klas ” attribuut van een element om lijnklemming toe te passen:
In de hierboven gedefinieerde syntaxis kan de gebruiker de getallen gebruiken van “ 1 tot 6 ” voor het gebruik van de standaard lijnklemklassen. Bijvoorbeeld de “ lijnklem-1 ”-klasse laat de tekstinhoud niet langer zijn dan één regel.
Laten we het concept van de “line-camp”-klasse begrijpen aan de hand van enkele voorbeelden.
Voorbeeld 1: Gebruik de Line Clamp Class om de inhoud te beperken tot een specifiek aantal regels
Laten we de tekstinhoud beperken tot drie regels met behulp van de line-clamping-klasse in Tailwind, zoals hieronder gedaan:
< div klas = ' afgerond-lg flex justify-center bg-slate-200 m-5 p-4' >
< P klas = 'lijnklem-3 w-72' > Dit is een voorbeeldparagraaf. Het zal slechts voor 3 regels zichtbaar zijn. Alle inhoud erna wordt verborgen. Dit komt door de lijnklemklasse in Tailwind. < / P >
< / div >
De uitleg van de bovenstaande code is als volgt:
- A ' div ”-element wordt gemaakt met afgeronde hoeken met behulp van de “ afgerond-lg ' klas. Het biedt de marge en opvulling met behulp van de “ m-{nummer} ” & “ p-{nummer} ' klassen.
- Vervolgens wordt het element in het div-element gecentreerd met behulp van de “ rechtvaardigen-centrum 'klas, en de' buigen ” class maakt een container die het onderliggende element van de div zal bevatten.
- De ' bg-{kleur}-{nummer} ” klasse stelt de achtergrondkleur van het div-element in.
- A ' Er wordt een tag gemaakt die de tekstinhoud bevat. Het wordt voorzien van een vaste breedte met behulp van de “ w-{nummer} ' klas.
- Ten slotte is de tekstinhoud van de “ P '-element is beperkt tot drie regels met behulp van de ' lijnklem-3 ' klas.
Uitvoer
In de uitvoer is te zien dat de tekstinhoud die de opgegeven limiet van drie regels overschrijdt, verborgen is:
Voorbeeld 2: Gebruik de lijnklemklasse met standaardstatussen in staartwind
Tailwind biedt verschillende standaardstatussen voor een element die kunnen worden gebruikt om de ontwerplay-outs dynamischer te maken. De ontwikkelaar kan elke Tailwind-klasse met deze statussen gebruiken om de opgegeven ontwerpeigenschap aan het element te leveren wanneer die status wordt bereikt. Op dezelfde manier kan de klasse “line-clamp” ook worden gebruikt met deze standaard Tailwind-statussen.
De syntaxis voor het gebruik van de klasse “line-clamp” met een status in Tailwind wordt hieronder gegeven:
{ staat } : lijnklem- { nummer }Er zijn drie standaardstatussen die als volgt worden beschreven:
- zweven: Het is de status van een element wanneer de gebruiker er met de muiscursor overheen beweegt.
- focus: Het is de toestand waarin het element scherp is. De gebruiker navigeert bijvoorbeeld naar het element door op de “tab”-toets te drukken.
- actief: De status wanneer het element door de gebruiker wordt geactiveerd.
In de onderstaande demonstratie is alles identiek aan het vorige voorbeeld. Het enige verschil is dat de lijnklemklasse is voorzien van de “ zweven ' staat:
< div klas = ' afgerond-lg flex justify-center bg-slate-200 m-5 p-4' >< P klas = 'hover:lijnklem-3 w-72' > Dit is een voorbeeldparagraaf. Het zal slechts voor 3 regels zichtbaar zijn. Alle inhoud erna wordt verborgen. Dit komt door de lin-klemklasse in Tailwind. < / P >
< / div >
Merk op dat de “ De les wordt verzorgd door de hover: lijnklem-3 ”klasse, die de tekstinhoud beperkt tot drie regels wanneer de gebruiker de muiscursor over het inhoudsvak beweegt.
Uitvoer
In de onderstaande uitvoer is te zien dat de lijnklemeigenschap wordt toegepast wanneer de muiscursor over het blok zweeft:
Voorbeeld 3: Gebruik de lijnklemklasse met breekpunten
Breekpunten zijn mediaquery's in Tailwind die gebruikers helpen een responsieve ontwerplay-out te creëren. Tailwind biedt vijf standaardbreekpunten met vooraf gedefinieerde minimumbreedtes. De ontwikkelaar kan bij deze breekpunten ook de lijnklemklasse gebruiken.
De syntaxis voor het gebruik van een lijnklemklasse met breekpunten is als volgt:
{ breekpuntvoorvoegsels } : lijnklem- { nummer }De “breekpuntvoorvoegsels” die in de bovenstaande syntaxis worden genoemd, zijn als volgt:
- sm: Dit breekpunt heeft een minimale breedte van 640px.
- md: Dit breekpunt heeft een minimale breedte van 768px.
- LG: Dit breekpunt heeft een minimale breedte van 1024px.
- xl: Dit breekpunt heeft een minimale breedte van 1280px.
- 2xl: Dit breekpunt heeft een minimale breedte van 1536px.
In de onderstaande demonstratie wordt de “ P ”-element is voorzien van verschillende lijnklemklassen op verschillende breekpunten. Hierdoor wordt de lijnklemeigenschap van het tekstblok gewijzigd wanneer het nieuwe breekpunt wordt bereikt:
< div klas = ' afgerond-lg flex justify-center bg-slate-200 m-5 p-4' >< P klas = ' lijnklem-1 lg:lijnklem-3 md:lijnklem-2 sm:lijnklem-1 w-72' > Dit is een voorbeeldparagraaf. Het zal slechts voor 3 regels zichtbaar zijn. Alle inhoud erna wordt verborgen. Dit komt door de lin-klemklasse in Tailwind. < / P >
< / div >
Het p-element is standaard voorzien van een klasse “line-clamp-1”. De tekstinhoud in het “p”-element is echter beperkt tot één regel voor de “ sm ” breekpunt, twee regels voor de “ md ” breekpunt, en drie regels voor de “ LG ' breekpunt.
Uitvoer
Uit de uitvoer blijkt duidelijk dat de eigenschap line-clamp van het tekstblok verandert naarmate de schermgrootte verandert:
We hebben de procedure gedemonstreerd om tekst in Tailwind op een specifiek aantal regels te klemmen.
Conclusie
De lijnklemklasse in Tailwind beperkt de tekstinhoud van een element tot het opgegeven aantal regels. De klasse “lin-clamp-{number}” wordt gebruikt als syntaxis voor het vastklemmen van de tekst op beperkte regels. De lijnklemklasse kan worden gebruikt met de vooraf gedefinieerde breekpunten en de statusvarianten in Tailwind. In dit artikel wordt de procedure beschreven voor het vastklemmen van de tekst op een bepaald aantal regels.