Многоточие в конце текста

В том случае, когда текст, находящийся в блоке превышает его размеры, имеется возможность обрезки подобного содержимого с помощью каскадных таблиц стилей. Для того чтобы получить подобный эффект используют свойство text-overflow с помощью которого в первом случае можно просто обрезать текст, а во втором помимо обрезки добавить многоточие. Стоит отметить, что text-overflow функционирует в том случае, если в декларации имеется свойство overflow с установленными параметрами такими как auto, scroll или hidden.

text-overflow: clip;
text-overflow: ellipsis;

clip – обрезка текста в пределах области.

ellipsis – обрезка текста с добавлением многоточия.

В блоке с классом box имеется запись – «Многоточие в конце текста». На изображении видно, что текст обрезан, так как не помещается полностью в контейнер, а в конце отображено многоточие.

В декларации для селектора box записано свойство overflow со значением hidden для обрезки непомещающегося содержимого, white-space с параметром nowrap для запрета переноса строк и text-overflow со свойством ellipsis чтобы добавить многоточие. Здесь же имеется ряд дополнительных свойств, которые определяют ширину блока, отступы и поля, размер и насыщенность шрифта, а так же цвет фона.

HTML

<div class="box">
  Многоточие в конце текста
</div>

CSS

.box{
    width: 340px;
    padding: 24px;
    font-size: 30px;
    overflow: hidden;
    font-weight: bold;
    margin: 40px auto;
    white-space: nowrap;
    background-color: #fc0;
    text-overflow: ellipsis;
}