Свойство 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>Читайте также
Свойство transform-style
Определяет, как дочерние элементы будут отображаться в 3D-пространстве. Это свойство должно использоваться совместно с transform....
Свойство font-stretch
Устанавливает узкое, нормальное или широкое начертание шрифта, что позволяет уплотнять или расширять текст....
Свойство
Задаёт, как выводить линию под или над текстом, когда линия пересекает выносные элементы букв, вроде «у», «р», «ц» и др. Линия может быть сплошной или...
Свойство top
Свойство top для позиционированного элемента определяет расстояние от верхнего края родительского элемента до верхнего края дочернего элемента. Отсчёт...