CSS свойство text-overflowcss3

CSS свойства

Определение и применение

CSS свойство text-overflow указывает, что должно произойти, когда текст переполняет, содержащий элемент.

Применение свойства рассматривается в тех ситуациях, когда текст обрезается, либо когда он переполняет содержимое элемента, в этих случаях текст можно обрезать, поставить троеточие ('...', Юникод - U+2026), или отобразить определенную пользовательскую строку(в настоящее время поддерживается только в Firefox). Т.е. text-overflow происходит, когда свойство overflow имеет значения hidden, scroll или auto и свойство white-space имеет значение nowrap (перенос слов запрещён).

Свойство text-overflow применяется только к блочным, либо блочно-строчным элементам, поскольку элемент должен иметь заданную ширину, кроме того переполнение происходит в зависимости от направления текста заданного свойством direction, либо глобальным HTML атрибутом dir.

Поддержка браузерами

ЗначениеChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
clip | ellipsis4.07.011.0
9.0
-o-
3.16.012.0
string
(пользовательская строка)
Нет9.0НетНетНетНет
2 value
(обе стороны)
Нет9.0НетНетНетНет

CSS синтаксис:

text-overflow:"clip | ellipsis | string | initial | inherit";

Значение string(пользовательская строка) поддерживается только в Firefox.
text-overflow:"///";
text-overflow:"..";
text-overflow:"☺☺☺"; и т.п.
Два значения для свойства (начало/конец элемента) поддерживается только в Firefox.
text-overflow:"☺☺☺" "☺☺☺";
text-overflow:clip ellipsis; и т.п.

JavaScript синтаксис:

object.style.textOverflow = "clip"

Значения свойства

ЗначениеОписание
clipТекст обрезается по размеру области содержимого. Это значение по умолчанию.
ellipsisДобавляет троеточие ('...', Юникод - U+2026), которое обозначает, что текст был обрезан. Троеточие (горизонтальное многоточие/эллипсис) отображается внутри области содержимого, уменьшая при этом размер отображаемого текста. Если необходимое место для отображения троеточия отсутствует, то оно обрезается.
stringУказывает пользовательскую строку для отображения обрезанного текста. В настоящее время поддерживается только в Firefox.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>>Переполнение текстом элемента в CSS</title>
<style> 
div {
width : 250px; /* задаём ширину блока */
border : 1px solid blue; /* задаём сплошную границу шириной 1px синего цвета */
background : azure; /* задаём цвет заднего фона  */
margin : 5px; /* указываем внешний отступ для всех сторон */
overflow : hidden; /* указываем, что при переполнении скрывать содержимое */
white-space : nowrap; /* перенос на новую строку не производится */
}
.test {
text-overflow:clip; /* текст обрезается по размеру области содержимого. */
}
.test2 {
text-overflow:ellipsis; /* добавляет троеточие, которое обозначает, что текст был обрезан */
}
.test3 {
text-overflow:"☺☺☺"; /* добавляет "пользовательскую строку"(пользовательское значение), которое обозначает, что текст был обрезан */
}
.test4 {
text-overflow:"☺☺☺" "☺☺☺"; /* добавляет "пользовательскую строку"(пользовательское значение), которое обозначает, что текст был обрезан как в начале, так и конце элемента */
text-indent : -10px; /* задаем отрицательную красную строку */
}
</style>
</head>
	<body>
		<div class = "test">съешь же ещё этих мягких французских булок, да выпей чаю</div>
		<div class = "test2">съешь же ещё этих мягких французских булок, да выпей чаю</div>
		<div class = "test3">съешь же ещё этих мягких французских булок, да выпей чаю</div>
		<div class = "test4">съешь же ещё этих мягких французских булок, да выпей чаю</div>
	</body>
</html>
Пример использования свойства text-overflow(переполнение текстом элемента в CSS).
Пример использования свойства text-overflow(переполнение текстом элемента в CSS).
CSS свойства