Својството 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;
}

Результат:

Погледнете ги и