CSS line-clamp generátor
CSS szabály generálása, amely szöveget N sor után csonkít, ellipszissel vagy fade effektussal.
CSS line-clamp generátor
A termékleírások, megjegyzések előnézetei és feliratok mind ugyanannak a trükknek az igénybevételét igénylik: néhány sor szöveget kell megjeleníteni és tisztán vágni le a többit, hogy elkerüljük a hosszú bekezdések elrendezés felrobbantását. Ez a generátor megírja neked a CSS szabályt, amely már kész a ".line-clamp" osztályként a stíluslapodba való beillesztéshez.
Válaszd az egysoros módot az egysoros csonkításhoz – a klasszikus "overflow: hidden; text-overflow: ellipsis; white-space: nowrap" kombinációt, amely címekhez és táblázatcellákhozhasználatos – vagy a többsoros módot, amely a "-webkit-line-clamp" segítségével vág le az általad beállított sorészám után, és figyelembe veszi a kiválasztott sormagasságot. Kapcsold be a fade lehetőséget, hogy az utolsó sort egy gradiens helyett lágy kevert átfedéssé alakítsd az ellipszis helyett, amely jobban néz ki a képek vagy színes kártyák fölött. A fallback lehetőség hozzáad egy "@supports" blokkot, így a line-clamp nélküli böngészők értelmes max-height csonkítást kapnak a csonkítatlan szöveg helyett, és a Tailwind lehetőség hozzáfűzi a megfelelő hasznossági osztályt ("truncate" vagy "line-clamp-N") megjegyzésként, hogy ne kelljen felkeresned.
Írd be vagy illeszd be a mondatot az előnézeti mezőbe, és az eszköz becsüli meg, hogy a szöveged hogyan válna szét a választott soreszám között, így előzetesen ellenőrizheted a sorszámot, mielőtt rögzítenéd a tervet. A becslés az átlagos olvasási sorrhosszra alapul, nem a valódi betűtípusok és tárolók mérésére – ez egy útmutató az értelmes soreszám kiválasztásához, nem egy pixelpontos renderelés.
Minden helyileg fut a böngészedben: a CSS-t az írás közben generálja, semmi sem kerül fel sehova, és másolhatod az eredményt, letöltheted .txt fájlként, vagy közvetlenül továbbíthatod egy másik eszköz bemeneteként a munka folytatásához.