A text-overflow tulajdonság

A text-overflow tulajdonság három pontot helyez a csonkolt szöveg végére, jelezve, hogy a szöveg nem fért el a blokkban és csonkolva lett.

A tulajdonság működéséhez a szövegnek csonkoltnak kell lennie a overflow tulajdonság vagy a overflow-x tulajdonság hidden, auto vagy scroll értéke által. Ha visible érték van beállítva (ez az alapértelmezés) - a text-overflow nem fog működni.

Szintaxis

cssszelektor {
  text-overflow: ellipsis | clip;
}

Értékek

Alapértelmezett érték: clip.

Példa . Kilógó szöveg

Ebben a példában egy nagyon hosszú szó nem fog elférti a tárolóban és kilóg annak határain. Nem történik csonkolás:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: visible;
  border: 1px solid red;
}

Результат:

Példa . Adjuk hozzá az overflow tulajdonságot

Most minden, ami kilóg a tároló határain, egyszerűen csonkolódni fog:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  border: 1px solid red;
}

Результат:

Példa . Az ellipsis érték

Most a overflow tulajdonság mellett hozzáadunk egy text-overflow tulajdonságot is ellipsis értékkel. A csonkolt szöveg végére három pont kerül:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Példa . Görgetősávval

Ha beállítjuk az overflow: auto és text-overflow: ellipsis értékeket, akkor megjelenik a görgetősáv, de a három pont továbbra is hozzáadódik. Próbálja meg görgetni a görgetősávot a példában:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: auto;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Példa . Ha nincs nagyon hosszú szó

Ha nincs olyan hosszú szó, amely kilógna a tároló határain, akkor nem történik csonkolás (hiszen semmi sem lóg ki). Nézze meg a következő példát:

html<div id="elem">
  Lorem ipsum dolor sit amet adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Példa . Szöveg egyetlen sorban

Vannak azonban olyan helyzetek, amikor azt szeretnénk, hogy a szöveg csonkolódjon, ha túl hosszú (a szöveg egésze, nem csak az egyes szavak), és ne törjedjen át a következő sorra. Ezt a white-space tulajdonság hozzáadásával érjük el nowrap értékkel, amely megtiltja a szöveg másik sorba történő áthordását. Nézze meg a példát, most a szöveg csonkolódik:

html<div id="elem">
  Lorem ipsum dolor sit amet adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Példa . Szélesség százalékban

Ha a blokk szélességét %-ban adjuk meg, akkor a csonkolás szintén megfelelően fog működni:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Lásd még