Свойство 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.

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии