Свойство white-space
Определяет, как обрабатывается пустое пространство (пробелы) элемента
white-space: normal;
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
white-space: normal;
Разрывы строк игнорируются. Перенос строки будет так, где закончилось место в блоке
<style>
.example-1 {
white-space: normal;
}
</style>
<div class="example-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Molestias, asperiores perspiciatis ducimus doloribus
iusto quis eos magni delectus impedit magnam quas
corrupti expedita ullam incidunt.</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, asperiores perspiciatis ducimus doloribus iusto quis eos magni delectus impedit magnam quas corrupti expedita ullam incidunt.
white-space: nowrap;
Запрещает перенос строк
<style>
.example-2 {
white-space: nowrap;
}
</style>
<div class="example-2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Omnis, quia, nobis sed autem ex similique necessitatibus
id ipsa quo qui molestias.</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, quia, nobis sed autem ex similique necessitatibus id ipsa quo qui molestias.
white-space: pre;
Все пробелы и переносы строк на странице сохраняются в таком же виде как и в коде, но если текст достигает границ блока - он не будет перенесен на новую строку.
<style>
.example-3 {
white-space: pre;
}
</style>
<div class="example-3">
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Nostrum, natus earum reiciendis ipsum eius cum impedit
praesentium quae blanditiis ipsa recusandae est.</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, natus earum reiciendis ipsum eius cum impedit praesentium quae blanditiis ipsa recusandae est.
white-space: pre-wrap;
Все пробелы и переносы строк на странице сохраняются в таком же виде как и в коде, и если текст достигает границ блока - он будет перенесен на новую строку.
<style>
.example-4 {
white-space: pre-wrap;
}
</style>
<div class="example-4">
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Nostrum, natus earum reiciendis ipsum
eius cum impedit praesentium quae blanditiis ipsa recusandae est.</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, natus earum reiciendis ipsum eius cum impedit praesentium quae blanditiis ipsa recusandae est.
white-space: pre-line;
Переносы строк на странице сохраняются в таком же виде как и в коде, и если текст достигает границ блока - он будет перенесен на новую строку. Лишние пробелы в коде игнорируются
<style>
.example-5 {
white-space: pre-line;
}
</style>
<div class="example-5">
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Nostrum, natus earum reiciendis ipsum eius cum impedit
praesentium quae blanditiis ipsa recusandae est.</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, natus earum reiciendis ipsum eius cum impedit praesentium quae blanditiis ipsa recusandae est.