Свойство text-overflow
Определяет, как ведет себя скрытый текст, который не помещается в блок, в котором он находится
text-overflow: ellipsis;Пошаговый план! Как быстро научиться создавать сайты!
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
text-overflow: clip;
Текст просто обрезается по достижению конца строки
Чтобы увидеть эффект, свойство text-overflow используется вместе с правилом white-space: nowrap; и с правилом overflow: hidden;
<style>
.example-1 {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
background: #cfe7f3;
}
</style>
<div class="example-1">Текст просто обрезается по достижению конца строки</div>Текст просто обрезается по достижению конца строки
text-overflow: ellipsis;
До того как текст достигнет конца строки, в строку вставится символ "..." (многоточие). Многоточие отображается внутри области содержимого, уменьшая объем отображаемого текста. Если для отображения многоточия недостаточно места, оно обрезается.
Чтобы увидеть эффект, свойство text-overflow используется вместе с правилом white-space: nowrap; и с правилом overflow: hidden;
<style>
.example-2 {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background: #cfe7f3;
}
</style>
<div class="example-2">Многоточие отображается внутри области содержимого</div>Многоточие отображается внутри области содержимого