Ez a cikk bemutatja a szöveg hátszélben való rögzítésének eljárását.
Hogyan lehet a szöveget meghatározott számú sorhoz rögzíteni?
A Tailwind vonalbefogási osztálya egy blokkban meghatározott számú sorra korlátozza a szövegtartalmat. Ezzel a szövegblokk elrejti az osztályban megadott sorszám utáni szöveget. Használható egy weboldalon, hogy megmutassa a felhasználónak, hogy van néhány szöveges információ, vagy elrejtheti az összes felesleges szöveget, hogy elkerülje a weboldal telítettségét.
Szintaxis
Az alább megadott szintaxis a ' osztály ” elem attribútuma a vonalrögzítés alkalmazásához:
A fent meghatározott szintaxisban a felhasználó használhatja a „ 1-től 6-ig ” az alapértelmezett vonalbefogási osztályok használatához. Például a „ vonalszorító-1 ” osztályban a szöveges tartalom nem haladhatja meg az egy sort.
Nézzük meg néhány példán keresztül a „line-camp” osztály fogalmát.
1. példa: Használja a Line Clamp Class osztályt a tartalom meghatározott számú sorra való korlátozásához
Korlátozzuk a szöveg tartalmát három sorra a Tailwind vonalbefogási osztályának használatával, az alábbiak szerint:
< div osztály = ' kerekített-lg flex justify-center bg-slate-200 m-5 p-4' >
< p osztály = 'line-clamp-3 w-72' > Ez egy minta bekezdés. Csak 3 sorig lesz látható. Az utána lévő tartalom rejtett lesz. Ez a Tailwind vonalbefogási osztályának köszönhető. < / p >
< / div >
A fenti kód magyarázata a következő:
- egy ' div ' elem lekerekített sarkokkal jön létre a ' lekerekített-lg ' osztály. A margót és a kitöltést a „ m-{szám} ' és ' p-{szám} ” osztályok.
- Ezután a div elemben lévő elemet a „ justify-center ' osztály, és a ' Flex ” osztály létrehoz egy tárolót, amely tartalmazza a div gyermek elemét.
- A ' bg-{color}-{number} ” osztály a div elem háttérszínét állítja be.
- egy ' ” címke jön létre, amely a szöveges tartalmat tartalmazza. Rögzített szélességet biztosít a „ w-{szám} ' osztály.
- Végül a „ p ' elem három sorra korlátozódik a ' vonalszorító-3 ' osztály.
Kimenet
A kimeneten látható, hogy a megadott háromsoros határt meghaladó szövegtartalom el van rejtve:
2. példa: Használja a vonalszorító osztályt az alapértelmezett állapotokkal hátszélben
A Tailwind különféle alapértelmezett állapotokat biztosít egy elemhez, amelyek segítségével dinamikusabbá tehetők a tervezési elrendezések. A fejlesztő bármilyen Tailwind osztályt használhat ezekkel az állapotokkal, hogy a megadott tervezési tulajdonságot biztosítsa az elemnek, amikor ezt az állapotot eléri. Hasonlóképpen, a „line-clamp” osztály is használható ezekkel az alapértelmezett Tailwind állapotokkal.
A „line-clamp” osztály használatának szintaxisa Tailwind állapottal az alábbiakban látható:
{ állapot } : vonalszorító- { szám }Három alapértelmezett állapot létezik, amelyek leírása a következő:
- lebeg: Ez egy elem állapota, amikor a felhasználó az egérmutatót fölé viszi.
- fókusz: Ez az az állapot, amikor az elem fókuszban van. Például a felhasználó a „tab” billentyű megnyomásával navigál az elemhez.
- aktív: Az az állapot, amikor az elemet a felhasználó aktiválja.
Az alábbi bemutatóban minden megegyezik az előző példával. Az egyetlen különbség az, hogy a vonalszorító osztály a „ lebeg ' állapot:
< div osztály = ' kerekített-lg flex justify-center bg-slate-200 m-5 p-4' >< p osztály = 'hover:line-clamp-3 w-72' > Ez egy minta bekezdés. Csak 3 sorig lesz látható. Az utána lévő tartalom rejtett lesz. Ez a Tailwind lin befogási osztályának köszönhető. < / p >
< / div >
Vegye figyelembe, hogy a „ ' osztályt a ' hover:line-clamp-3 ” osztály, amely három sorra korlátozza a szöveges tartalmat, amikor a felhasználó az egérmutatót a tartalomdoboz fölé viszi.
Kimenet
Az alábbi kimeneten látható, hogy a vonalszorító tulajdonság akkor érvényesül, amikor az egérkurzor a blokk fölé viszi:
3. példa: Használja a vonalszorító osztályt töréspontokkal
A töréspontok olyan médialekérdezések a Tailwindben, amelyek segítenek a felhasználóknak adaptív tervezési elrendezés létrehozásában. A Tailwind öt alapértelmezett töréspontot biztosít előre meghatározott minimális szélességekkel. A fejlesztő a vonalbefogási osztályt is használhatja ezekkel a töréspontokkal.
A töréspontokkal rendelkező vonalbefogási osztály használatának szintaxisa a következő:
{ töréspont előtagok } : vonalszorító- { szám }A fenti szintaxisban említett „töréspont-előtagok” a következők:
- sm: Ennek a töréspontnak a minimális szélessége 640 képpont.
- md: Ennek a töréspontnak a minimális szélessége 768 képpont.
- lg: Ennek a töréspontnak a minimális szélessége 1024 képpont.
- xl: Ennek a töréspontnak a minimális szélessége 1280 képpont.
- 2xl: Ennek a töréspontnak a minimális szélessége 1536 képpont.
Az alábbiakban bemutatott bemutatón a „ p ” elem különböző vonalszorító osztályokkal van ellátva különböző töréspontokon. Ez megváltoztatja a szövegblokk sorzáró tulajdonságát, amikor eléri az új töréspontot:
< div osztály = ' kerekített-lg flex justify-center bg-slate-200 m-5 p-4' >< p osztály = 'vonal-bilincs-1 lg:vonal-bilincs-3 md:vonal-bilincs-2 sm:vonal-bilincs-1 w-72' > Ez egy minta bekezdés. Csak 3 sorig lesz látható. Az utána lévő tartalom rejtett lesz. Ez a Tailwind lin befogási osztályának köszönhető. < / p >
< / div >
A p elem alapértelmezés szerint „line-clamp-1” osztályú. A „p” elem szövegtartalma azonban egy sorra korlátozódik a „ sm ' töréspont, két sor a ' md ' töréspont, és három sor a ' lg ” töréspont.
Kimenet
A kimenetből jól látható, hogy a szövegblokk line-clamp tulajdonsága a képernyő méretének változásával változik:
Bemutattuk azt az eljárást, amellyel a szöveget meghatározott számú sorhoz rögzíthetjük a Tailwindben.
Következtetés
A Tailwind vonalbefogási osztálya egy elem szövegtartalmát a megadott számú sorra korlátozza. A „lin-clamp-{number}” osztály szintaxisként használható a szöveg korlátozott sorokba szorításához. A vonalszorító osztály az előre meghatározott töréspontokkal és állapotváltozatokkal használható a Tailwindben. Ez a cikk azt az eljárást ismerteti, amellyel a szöveget meghatározott számú sorra rögzítheti.