text-overflow

Baseline Широко доступно

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

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

Попробовать

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

overflow: hidden;
white-space: nowrap;

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

Синтаксис

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;

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

Значения

clip: По умолчанию для этого свойства. Это ключевое значение обрезает текст на границе области содержимого, поэтому обрезка может произойти посреди символа. Для обрезки на границе между символами можно указать text-overflow как пустую строку, если это поддерживается целевыми браузерами: text-overflow: '';.
ellipsis: Это ключевое значение отобразит многоточие ('…', U+2026 HORIZONTAL ELLIPSIS) для обозначения обрезанного текста. Многоточие отображается внутри области содержимого, уменьшая количество отображаемого текста. Если места недостаточно для отображения многоточия, оно обрезается.
<string>: Строка <string> для обозначения обрезанного текста. Строка отображается внутри области содержимого, уменьшая размер отображаемого текста. Если места недостаточно для самой строки, она обрезается.

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

Начальное значение	`clip`
Применяется к	блочным контейнерам
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	дискретный

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

text-overflow = 
  clip      |
  ellipsis

Примеры

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

Этот пример демонстрирует различные значения для 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);
}

Результат

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

Спецификация
CSS Overflow Module Level 3 # text-overflow

Предыдущая версия этого интерфейса достигла статуса «Кандидат в рекомендации». Поскольку некоторые не перечисленные в списке рискованные функции необходимо было удалить, спецификация была понижена до уровня «Рабочий проект», объясняя, почему браузеры реализовали это свойство без префикса, хотя и не в состоянии «Кандидат в рекомендации».

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

	Рабочий стол					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`text-overflow`	1	12	7 До Firefox 10 обработка `text-overflow` в блоках с переполнением inline по обеим горизонтальным сторонам была некорректной. До Firefox 10, если было указано только одно значение (например, `text-overflow: ellipsis;`), текст обрезался многоточием с обеих сторон блока, а не только с конца края, основываясь на направлении текста блока.	119–15	1.3	18	7 До Firefox 10 обработка `text-overflow` в блоках с переполнением inline по обеим горизонтальным сторонам была некорректной. До Firefox 10, если было указано только одно значение (например, `text-overflow: ellipsis;`), текст обрезался многоточием с обеих сторон блока, а не только с конца края, основываясь на направлении текста блока.	1110.1–14	1	1.0	4.4
`clip`	1	12	7	15	1.3	18	7	14	1	1.0	4.4
`ellipsis`	1	12	7	15	1.3	18	7	14	1	1.0	4.4
`string`	Нет	Нет	9	Нет	Нет	Нет	9	Нет	Нет	Нет	Нет
`two_value_syntax`	Нет	Нет	9	Нет	Нет	Нет	9	Нет	Нет	Нет	Нет

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow