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

Результат:

Вижте също