Den här artikeln kommer att ge proceduren för att klämma fast texten i en medvind.
Hur man klämmer fast text till ett visst antal rader?
Line-clamping class i Tailwind begränsar textinnehållet i ett block till ett visst antal rader. Genom att göra detta kommer textblocket att dölja texten efter det antal rader som anges i klassen. Den kan användas på en webbsida för att visa användaren att det finns viss textinformation eller för att dölja all onödig text för att undvika mättnad på webbsidan.
Syntax
Den nedan givna syntaxen finns i ' klass ” attribut för ett element för att tillämpa linjeklämning:
I den ovan definierade syntaxen kan användaren använda siffrorna från ' 1 till 6 ” för att använda standardlinjeklämningsklasserna. Till exempel, ' line-clamp-1 ” klass kommer inte att låta textinnehållet överstiga en rad.
Låt oss förstå konceptet med 'line-camp' klass genom några exempel.
Exempel 1: Använd Line Clamp Class för att begränsa innehållet till ett visst antal rader
Låt oss begränsa textinnehållet till tre rader med hjälp av linjeklämningsklassen i Tailwind enligt nedan:
< div klass = ' rounded-lg flex justify-center bg-slate-200 m-5 p-4' >
< sid klass = 'line-clamp-3 w-72' > Detta är ett exempel på paragraf. Det kommer bara att vara synligt i 3 rader. Allt innehåll efter det kommer att döljas. Detta på grund av linklämningsklassen i Tailwind. < / sid >
< / div >
Förklaringen av ovanstående kod är följande:
- en ' div element skapas med rundade hörn med hjälp av ' rundad-lg ' klass. Det ger marginalen och utfyllnaden med hjälp av ' m-{number} ” & “ p-{nummer} ' klasser.
- Därefter centreras elementet i div-elementet med hjälp av ' motivera-center '-klassen och ' böja ” klass skapar en behållare som kommer att innehålla det underordnade elementet i div.
- den ' bg-{color}-{number} ” klass ställer in bakgrundsfärgen för div-elementet.
- en ' ”-taggen skapas som innehåller textinnehållet. Den tillhandahålls med fast bredd med hjälp av ' w-{number} ' klass.
- Slutligen, textinnehållet i ' sid '-elementet är begränsat till tre rader med ' line-clamp-3 ' klass.
Produktion
Det kan ses i utgången att textinnehållet som överskred den angivna gränsen på tre rader är dolt:
Exempel 2: Använd Line Clamp Class med standardtillstånd i Tailwind
Tailwind tillhandahåller olika standardtillstånd för ett element som kan användas för att göra designlayouterna mer dynamiska. Utvecklaren kan använda vilken Tailwind-klass som helst med dessa tillstånd för att tillhandahålla den specificerade designegenskapen till elementet närhelst det tillståndet uppnås. På samma sätt kan klassen 'line-clamp' också användas med dessa standard Medvindstillstånd.
Syntaxen för att använda klassen 'line-clamp' med ett tillstånd i Tailwind ges nedan:
{ stat } : linje-klämma- { siffra }Det finns tre standardtillstånd som beskrivs enligt följande:
- sväva: Det är tillståndet för ett element när användaren håller muspekaren över det.
- fokus: Det är tillståndet när elementet är i fokus. Användaren navigerar till exempel till elementet genom att trycka på 'tab'-tangenten.
- aktiva: Tillståndet när elementet aktiveras av användaren.
I demonstrationen nedan är allt identiskt med föregående exempel. Den enda skillnaden är att linjeklämningsklassen är försedd med ' sväva ' stat:
< div klass = ' rounded-lg flex justify-center bg-slate-200 m-5 p-4' >< sid klass = ' hover:line-clamp-3 w-72' > Detta är ett exempel på paragraf. Det kommer bara att vara synligt i 3 rader. Allt innehåll efter det kommer att döljas. Detta beror på linklämningsklassen i Tailwind. < / sid >
< / div >
Observera att ' klass tillhandahålls av ' hover:line-clamp-3 ” klass, som kommer att begränsa textinnehållet till tre rader när användaren håller muspekaren över innehållsrutan.
Produktion
Det kan ses i utgången nedan att linjeklämningsegenskapen tillämpas när muspekaren svävar över blocket:
Exempel 3: Använd Line Clamp Class med brytpunkter
Brytpunkter är mediefrågor i Tailwind som hjälper användare att skapa en responsiv designlayout. Tailwind tillhandahåller fem standardbrytpunkter med fördefinierade minimibredder. Utvecklaren kan också använda linjeklämningsklassen med dessa brytpunkter.
Syntaxen för att använda en linjeklämningsklass med brytpunkter är följande:
{ brytpunktsprefix } : linje-klämma- { siffra }De 'brytpunktsprefix' som nämns i ovanstående syntax är följande:
- sm: Denna brytpunkt har en minsta bredd på 640px.
- md: Denna brytpunkt har en minsta bredd på 768px.
- lg: Denna brytpunkt har en minsta bredd på 1024px.
- xl: Denna brytpunkt har en minsta bredd på 1280px.
- 2xl: Denna brytpunkt har en minsta bredd på 1536px.
I den nedan tillhandahållna demonstrationen, ' sid ”-elementet är försett med olika line-clamp-klasser på olika brytpunkter. Detta kommer att ändra linjeklämningsegenskapen för textblocket när den nya brytpunkten nås:
< div klass = ' rounded-lg flex justify-center bg-slate-200 m-5 p-4' >< sid klass = ' line-clamp-1 lg:line-clamp-3 md:line-clamp-2 sm:line-clamp-1 w-72' > Detta är ett exempel på paragraf. Det kommer bara att vara synligt i 3 rader. Allt innehåll efter det kommer att döljas. Detta beror på linklämningsklassen i Tailwind. < / sid >
< / div >
P-elementet är som standard försett med en 'line-clamp-1'-klass. Textinnehållet i 'p'-elementet kommer dock att begränsas till en rad för ' sm ' brytpunkt, två rader för ' md ' brytpunkt och tre rader för ' lg ' brytpunkt.
Produktion
Från utgången är det tydligt att line-clamp-egenskapen för textblocket ändras när skärmstorleken ändras:
Vi har demonstrerat proceduren för att klämma fast text till ett specifikt antal rader i Tailwind.
Slutsats
Line clamp-klassen i Tailwind begränsar textinnehållet i ett element till det specificerade antalet rader. Klassen 'lin-clamp-{number}' används som en syntax för att klämma fast texten till begränsade rader. Linjeklämklassen kan användas med de fördefinierade brytpunkterna och tillståndsvarianterna i Tailwind. Den här artikeln har tillhandahållit proceduren för att klämma fast texten till ett visst antal rader.