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

В том случае, когда текст, находящийся в блоке превышает его размеры, имеется возможность обрезки подобного содержимого с помощью каскадных таблиц стилей. Для того чтобы получить подобный эффект используют свойство 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;
}