Свойство 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>
Многоточие отображается внутри области содержимого

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

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии