Свойство text-overflow

Описание

Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие.

text-overflow работает в том случае, если для блока значение свойства overflow установлено как auto, scroll или hidden.

Синтаксис

text-overflow: clip | ellipsis;
Значение Описание
clip Текст обрезается по размеру области.
ellipsis Текст обрезается и к концу строки добавляется многоточие.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
 .example-1 {
 width: 200px;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: clip;
 }
 </style>
 
 <div class='example-1'>Текст просто обрезается по достижению конца строки</div>
 <style>
 .example-2 {
 width: 200px;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 }
 </style>
 
 <div class='example-2'>Многоточие отображается внутри области содержимого</div>
</body>
</html>
Текст просто обрезается по достижению конца строки
Многоточие отображается внутри области содержимого

Читайте также

Свойство font-style

Определяет начертание шрифта — обычное, курсивное или наклонное.<br><br>Когда для тек...

Свойство grid-template-rows

Определяет строки сетки с помощью списка значений разделённого пробелами. Значения представляют и...

Свойство padding-left

Устанавливает расстояние от внутреннего левого края рамки элемента до воображаемого прямоугольника.

Свойство background-position-y

Задаёт начальное положение фонового изображения по оси Y, установленного с помощью свойства backg...

Свойство transition-timing-function

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