Új hozzászólás Aktív témák

• #2771 indigo aktív tag

  Új Válasz 2022-05-26 13:43:56 #2771

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  indigo

  aktív tag

  Van olyan property, amelyet fel lehet ahhoz használni, hogy levágjunk a szövegből és a levágást követően elhelyezzünk három pöttyöt jelezvén, hogy folytatódna a szöveg, ha lenne hely. Ehhez több property-t kell összefűznünk:

  white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

  A fenti kódban az első kulcs-érték párossal biztosítjuk, hogy ne törjön meg a szöveg, ne legyen új sorban.
  A második kulcs-érték párossal ugye levágjuk a szöveg rendelkezésre álló helyéből kilógó részt.
  A harmadik kulcs-érték párossal pedig utána fűzzük a három pöttyöt.
  Ezt akkor szoktuk használni, ha egy sort kell csak levágni/lerövidíteni.

  Amennyiben tetszőleges számú sor után akarunk levágást, ahhoz másik, korlátozottan támogatott property-kre van szükségünk:

  display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

  Az első kódsor ahhoz kell, hogy az alatta levők működjenek.
  A második kódsorban határozzuk meg egy számmal, hogy hány sor után szeretnénk a levágást. jelen esetben a 2. sor után.
  A harmadik kódsor pedig a tartalom elhelyezését jelöli (függőleges).

  Ha a fenti jsfiddle példában a h2 magassága után beírjuk a fenti webikt-es kódsorokat meghagyva a végén az overflow: hidden kulcs-érték párost, akkor a 2. sor után levágja a szöveget. Ugyanez lesz igaz, ha a p tag-re alkalmazzuk ezt.

Új hozzászólás Aktív témák