text overflow
Текст
text-overflowТеперь рассмотрим ситуацию, когда отображается только часть текста, а то, что выходит за пределы контейнера, обрезается
Для того, чтобы текст, выходящий за границу контенера, не отображался, устанавливаем значения свойств:
white-space: nowrapoverflow: hidden
Теперь используем свойство text-overflow:
p {
max-width: 50%;
white-space: nowrap;
overflow: hidden;
}
p:hover {
white-space: pre-wrap;
}
.dots {
text-overflow: ellipsis;
}
.clip {
text-overflow: clip;
}<body>
<h4>text-overflow: ellipsis</h4>
<p class="ellipsis">
The word-break property in CSS can be used to change when line breaks ought to occur.
Normally, line breaks in text can only occur in certain spaces,
like when there is a space or a hyphen
</p>
<h4>text-overflow: clip</h4>
<p class="clip">
The word-break property in CSS can be used to change when line breaks ought to occur.
Normally, line breaks in text can only occur in certain spaces,
like when there is a space or a hyphen
</p>
</body> |
|---|
Всемирная паутина
Пример
Flexbox Froggy
