Својство text-overflow

Својство text-overflow додаје тачке на крају одсеченог текста као знак да текст није стао у блок и био је одсечен.

Да би својство радило, текст мора бити одсечен преко својства overflow или својства overflow-x у вредности hidden, auto или scroll. Ако је постављено visible (а тако је по дефаулту) - text-overflow неће радити.

Синтакса

cssселектор {
  text-overflow: ellipsis | clip;
}

Вредности

Подразумевана вредност: clip.

Пример . Текст који излази

У овом примеру веома дугачка реч неће стати у контејнер и излеће преко његових граница. Одсецања не долази:

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;
}

Результат:

Пример . Додајмо својство overflow

Сада ће све што је изашло преко граница контејнера бити једноставно одсечено:

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;
}

Результат:

Пример . Вредност ellipsis

Сада, поред својства overflow додајмо још и text-overflow у вредности ellipsis. Одсеченом тексту ће се додати тачке на крају:

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;
}

Результат:

Пример . Са тракама за клизање

Ако се постави overflow: auto и text-overflow: ellipsis, онда ће се појавити трака за клизање, али ће тачке и даље бити додате. Покушајте да клизнете траку за клизање у примеру:

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;
}

Результат:

Пример . Ако нема веома дугачких речи

Ако нема толико дугачких речи да би излазиле преко границе контејнера, онда одсецање неће доћи (ништа и не излази). Погледајте следећи пример:

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;
}

Результат:

Пример . Текст у једном реду

Међутим, постоје ситуације када желимо да текст буде одсечен ако је превише дугачак (текст уопште, а не појединачне речи) и да се не преноси на следећи ред. То се ради помоћу додавања својства white-space у вредности nowrap, које забрањује пренос текста на други ред. Погледајте на пример, сада текст бива одсечен:

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;
}

Результат:

Пример . Ширина у процентима

Ако се постави ширина блока у %, онда одсецање такође ради коректно:

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;
}

Результат:

Види још