Свойство CSS `text-overflow`

Свойство text-overflow CSS задаёт способ уведомления пользователей о скрытом содержимом, выходящем за границы области.

Попробуйте

text-overflow: clip;

text-overflow: ellipsis;

text-overflow: "-";

text-overflow: "";

<section id="default-example">
  <div id="example-element-container">
    <p id="example-element">"Is there any tea on this spaceship?" he asked.</p>
  </div>
</section>

#example-element-container {
  width: 100%;
  max-width: 18em;
}

#example-element {
  line-height: 50px;
  border: 1px solid #c5c5c5;
  overflow: hidden;
  white-space: nowrap;
  font-family: sans-serif;
  padding: 0 0.5em;
  text-align: left;
}

Синтаксис

text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;

Значения

Это свойство задаётся одним или двумя значениями, разделёнными пробелами:

clip

Значение по умолчанию для этого свойства. При этом ключевом значении текст обрезается на границе области содержимого, поэтому обрезка может произойти посреди символа. Чтобы обрезать текст на границе между символами, можно задать text-overflow как пустую строку, если это поддерживается целевыми браузерами: text-overflow: '';.

ellipsis

При этом ключевом значении для обозначения обрезанного текста отображается многоточие ('…', U+2026 HORIZONTAL ELLIPSIS). Многоточие отображается внутри области содержимого, уменьшая объём отображаемого текста. Если места для многоточия недостаточно, оно обрезается.

<string>

<string>, используемая для обозначения обрезанного текста. Строка отображается внутри области содержимого, сокращая объём отображаемого текста. Если места для самой строки недостаточно, она обрезается.

Описание

Свойство text-overflow задаёт способ уведомления пользователей о скрытом содержимом, выходящем за границы области. Содержимое может быть обрезано, вместо него может отображаться многоточие (…) или пользовательская строка.

Свойство text-overflow не вызывает переполнение само по себе. Чтобы текст вышел за границы контейнера, необходимо задать другие свойства CSS: overflow и white-space. Например:

overflow: hidden;
white-space: nowrap;

Свойство text-overflow влияет только на содержимое, которое выходит за границы блочного контейнера в направлении его строчного потока (например, не на текст, выходящий за нижнюю границу блока).

Свойству text-overflow можно задать одно или два значения. Если указано одно значение, оно определяет поведение при переполнении в конце строки (справа для текста слева направо, слева для текста справа налево). Если указаны два значения, первое определяет поведение при переполнении в начале строки, а второе — в конце строки.

ellipsis ведёт себя как clip для редактируемых элементов

Когда text-overflow: ellipsis применяется к редактируемым элементам, таким как текстовые элементы <input>, <textarea> и contenteditable, браузеры обычно рассматривают его как text-overflow: clip: постоянно или только когда элемент находится в фокусе. Точное поведение зависит от браузера; см. раздел Совместимость с браузерами.

Такое поведение позволяет перемещаться по переполненному тексту и редактировать его. Если бы переполненный текст оставался скрытым за многоточием, его нельзя было бы увидеть или отредактировать.

Поведение показано в следующем интерактивном примере, к которому применены эти стили CSS:

p[contenteditable],
input,
textarea {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<p contenteditable="">
  contenteditable paragraph. The text in here is overflowing.
</p>

<hr />

<input type="text" value="Text input. The text in here is overflowing." />

<hr />

<textarea>Textarea. The text in here is overflowing.</textarea>

Переведите фокус на разные элементы и попробуйте отредактировать их текст.

Формальное определение

Формальный синтаксис

text-overflow = 
  [ clip | ellipsis | <string> ]{1,2}

Примеры

Синтаксис с одним значением

В этом примере показаны разные значения text-overflow, применённые к абзацу с текстом слева направо и справа налево.

HTML

<div class="ltr">
  <h2>Left to right text</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

<div class="rtl">
  <h2>Right to left text</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

CSS

p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;

  /* Both of the following are required for text-overflow */
  white-space: nowrap;
  overflow: hidden;
}

.overflow-clip {
  text-overflow: clip;
}

.overflow-ellipsis {
  text-overflow: ellipsis;
}

.overflow-string {
  text-overflow: " [..]";
}

body {
  display: flex;
  justify-content: space-around;
}

.ltr > p {
  direction: ltr;
}

.rtl > p {
  direction: rtl;
}

Результат

Синтаксис с двумя значениями

В этом примере показан синтаксис text-overflow с двумя значениями, позволяющий задать разное поведение при переполнении в начале и конце текста. Чтобы увидеть эффект, необходимо прокрутить строку так, чтобы её начало тоже было скрыто.

HTML

<pre>clip clip</pre>
<p class="overflow-clip-clip">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>clip ellipsis</pre>
<p class="overflow-clip-ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>ellipsis ellipsis</pre>
<p class="overflow-ellipsis-ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>ellipsis " [..]"</pre>
<p class="overflow-ellipsis-string">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>

CSS

p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;

  /* Both of the following are required for text-overflow */
  white-space: nowrap;
  overflow: scroll;
}

.overflow-clip-clip {
  text-overflow: clip clip;
}

.overflow-clip-ellipsis {
  text-overflow: clip ellipsis;
}

.overflow-ellipsis-ellipsis {
  text-overflow: ellipsis ellipsis;
}

.overflow-ellipsis-string {
  text-overflow: ellipsis " [..]";
}

JavaScript

// Scroll each paragraph so the start is also hidden
const paras = document.querySelectorAll("p");

for (const para of paras) {
  para.scroll(100, 0);
}

Результат

Спецификации

Предыдущая версия этого интерфейса получила статус Candidate Recommendation. Поскольку пришлось удалить некоторые функции, не отмеченные как подверженные риску, спецификация была понижена до уровня Working Draft. Это объясняет, почему браузеры реализовали это свойство без префикса, хотя оно ещё не достигло статуса CR.

Совместимость с браузерами

См. также

• Связанные свойства CSS: overflow, white-space
• Свойства CSS, управляющие переносом слов: overflow-wrap, word-break