Efecte de text CSS. CSS Text Overflow, Word Wrap, Reguli de line breaking și moduri de scriere. Proprietăți: text-overflow, word-wrap, word-break, writing-mode.

Efecte de text CSS (CSS Text Effects)

CSS Text Overflow, Word Wrap, Reguli de line breaking și moduri de scriere

În acest capitol veți afla despre următoarele proprietăți:

• text-overflow
• word-wrap
• word-break
• writing-mode

CSS Text Overflow

Proprietatea CSS text-overflow specifică modul în care conținutul overflowed care nu este afișat trebuie semnalat utilizatorului.

Poate fi decupat:



sau poate fi redat ca elipsă (...):



Codul CSS este următorul:

Exemplu:

p.test1 {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip;
}

p.test2 {
    white-space: nowrap;
    width: 200px;
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis;
}

Următorul exemplu arată cum puteți afișa conținutul overflowed când treceți peste element:

Exemplu:

div.test:hover {
  overflow: visible;
}