8.1 Свойство text-overflow
Обтекание текста и управление его отображением являются важными аспектами веб-дизайна, особенно при работе с длинными строками текста или ограниченными по размеру контейнерами. Свойства text-overflow, white-space и word-wrap (ныне известное как overflow-wrap) позволяют контролировать, как текст ведет себя в таких ситуациях.
Свойство text-overflow управляет тем, как отображается текст, который выходит за границы контейнера. Оно используется в сочетании со свойствами white-space и overflow для создания эффекта обрезания текста и добавления многоточия.
Значения:
clip: обрезает текст, который выходит за границы контейнераellipsis: добавляет многоточие (...) в конце обрезанного текста
Пример использования:
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
border: 1px solid #000;
}
.clip {
text-overflow: clip;
}
.ellipsis {
text-overflow: ellipsis;
}
<body>
<div class="container clip">Этот текст будет обрезан по границе контейнера.</div>
<div class="container ellipsis">Этот текст будет обрезан и заменен многоточием.</div>
</body>
8.2 Свойство white-space
Свойство white-space управляет обработкой пробельных символов и переносом текста. Оно позволяет задавать, как пробелы, табуляции и новые строки обрабатываются в тексте.
Значения:
normal: пробелы и переносы строк обрабатываются нормально (по умолчанию)nowrap: текст отображается в одну строку, без переносовpre: пробелы и переносы строк сохраняются, как в HTML-теге<pre>pre-wrap: пробелы и переносы строк сохраняются, но текст может переноситься на новую строку при необходимостиpre-line: переносы строк сохраняются, но пробелы обрабатываются как обычноbreak-spaces: пробелы и переносы строк сохраняются, и длинные пробелы могут вызывать перенос строк
Пример использования:
.normal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}
<body>
<div class="normal">Этот текст будет перенесен на следующую строку, если не будет хватать места.</div>
<div class="nowrap">Этот текст не будет перенесен на следующую строку и будет отображаться в одну строку.</div>
<div class="pre">
Этот текст сохранит
все пробелы и переносы строк.
</div>
<div class="pre-wrap">
Этот текст будет перенесен на следующую строку, но также сохранит
все пробелы и переносы строк.
</div>
</body>
8.3 Свойство overflow-wrap
Свойство overflow-wrap (ранее известное как word-wrap) управляет переносом слов, которые выходят за границы контейнера. Оно позволяет предотвратить переполнение контейнера длинными словами, которые не могут быть разделены на части.
Значения
normal: перенос слов осуществляется согласно стандартным правилам переносаbreak-word: перенос слов осуществляется, даже если для этого нужно разорвать слово на части
Пример использования:
.container {
width: 200px;
border: 1px solid #000;
}
.normal {
overflow-wrap: normal;
}
.break-word {
overflow-wrap: break-word;
}
<body>
<div class="container normal">Этот текст будет перенесен на следующую строку, если не будет хватать места.</div>
<div class="container break-word">ЭтотдлинноесловоНЕпереноситсяпереноситсянаследующуюстрокуеслинебудет хвататьместа.</div>
</body>
Объяснение кода:
overflow-wrap: normal;: перенос слов осуществляется по стандартным правилам, без разрыва словoverflow-wrap: break-word;: длинные слова будут разрываться и переноситься на следующую строку при необходимости
8.4 Совместное использование свойств
Свойства text-overflow, white-space и word-wrap часто используются вместе для достижения желаемого эффекта отображения текста в ограниченных по размеру контейнерах.
Пример использования:
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: break-word;
border: 1px solid #000;
}
<body>
<div class="container">Этот текст будет обрезан и заменен многоточием, если не будет хватать места в контейнере.</div>
</body>
Объяснение кода:
white-space: nowrap;: текст отображается в одну строку, без переносаoverflow: hidden;: скрывает текст, выходящий за границы контейнераtext-overflow: ellipsis;: добавляет многоточие в конце обрезанного текстаoverflow-wrap: break-word;: переносит длинные слова, если не хватает места
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ