Свойство white-space — разрывы строк длинного текста, пробелы между словами
Свойство white-space устанавливает
как переносить текст на новую строку, а также
как отображать пробелы между словами и переносы
строк (места, где был нажат Enter при наборе
кода).
Синтаксис
селектор {
white-space: nowrap | pre | pre-line | pre-wrap | normal;
}
Значения
| Значение | Описание |
|---|---|
nowrap | Запрещает тексту переносится на другую строку, даже если он не помещается в ширину контейнера (в этом случае текст просто вылезет за его границы). Однако, добавление тега br заставит текст перенестись на новую строку. |
pre | Текст показывается так, как был набран в блокноте при верстке сайта: со всеми пробелами и
enter-ами (если в коде набрано несколько пробелов — на экране тоже будет несколько). При этом браузер не будет переносить текст на новую строку, если он не помещается
в контейнер — текст просто вылезет за его границы. |
pre-wrap | То же самое, что и pre, отличие в том, что если текст слишком длинный и не влазит в контейнер — браузер перенесет его на другую строку. |
pre-line | Браузер учитывает только Enter-ы в HTML коде и игнорирует все остальное (несколько пробелов будут выглядеть как один, браузер сам расставляет разрывы строк). |
normal | Стандартное поведение: браузер сам расставляет разрывы строки так, чтобы слова поместились в контейнер. Несколько пробелов в коде будут выглядеть как один на экране. |
Значение по умолчанию: normal.
Пример .
Значение nowrap В данном примере текст не поместится в контейнер
и вылезет за его границы, так как задано
значение nowrap:<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</div>#elem {
width: 200px;
white-space: nowrap;
border: 1px solid red;
}
:
Пример . Значение nowrap и тег br
Если добавить тег br — текст перенесется на новую строку (именно в том месте, где стоит br):
<div>
Lorem ipsum dolor sit <br> amet, consectetur adipiscing elitorire.
</div>#elem {
width: 200px;
white-space: nowrap;
border: 1px solid red;
}
:
Пример . Значение pre
В данном примере текст показывается так, как был набран в редакторе HTML кода (со всеми отступами клавишей Tab, с Enter и так далее):
<div>
Lorem ipsum
dolor sit amet, consectetur adipiscing elitorire.
</div>#elem {
width: 200px;
white-space: pre;
border: 1px solid red;
}
:
Пример . Значение pre-wrap
А сейчас текст показывается так, как был набран в редакторе HTML кода, однако, вылезающие части переносятся на новую строку:
<div>
Lorem ipsum
dolor sit amet, consectetur adipiscing elitorire.
</div>#elem {
width: 200px;
white-space: pre-wrap;
border: 1px solid red;
}
:
Смотрите также
- свойства
word-breakиoverflow-wrap,
которые позволяют перенести буквы длинного слова на новую строку - свойство
tab-size,
которое устанавливает размер отступа, созданного клавишей Tab - свойство
hyphens,
которое включает переносы слов по слогам - свойство
overflow,
которое обрезает вылезающие за границу блока части - тег
pre,
который показывает текст так, как он был набран в редакторе HTML кода
Свойство white-space | Справочник HTML CSS
Определяет, как обрабатывается пустое пространство (пробелы) элемента
white-space: normal;
Пошаговый план! Как быстро научиться создавать сайты!
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
white-space: normal;
Разрывы строк игнорируются.
<style>
.example-1 {
white-space: normal;
}
</style>
<div>
<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>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Omnis, quia, nobis sed autem ex similique necessitatibus
id ipsa quo qui molestias.
</p>
</div>
</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>
<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>
<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>
<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>
</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)
html — разрыв строки (например) с использованием только css
Задавать вопрос
спросил
Изменено 11 месяцев назад
Просмотрено 158 тысяч раз
Можно ли в чистом css, то есть без добавления дополнительных html тегов сделать перенос строки типа ? Я хочу разрыв строки после элемента
, но не перед:
HTML
Подзаголовок
Текст, текст, текст, текст, текст.
CSS
h5 {
дисплей: встроенный;
}
Я нашел много подобных вопросов, но всегда с ответами типа «use display: block;» , чего я не могу сделать, когда должен оставаться на той же строке.
- HTML
- CSS
- стиль
5
Работает так:
h5 {
дисплей: встроенный;
}
h5: после {
содержимое: "\а";
пробел: предварительно;
}
Пример: http://jsfiddle.net/Bb2d7/
Хитрость исходит отсюда: https://stackoverflow.com/a/66000/509752 (чтобы иметь больше объяснений)
5
Попытка
h5{дисплей:блок;}
в вашем css
http://jsfiddle.net/ZrJP6/
5
Вы можете использовать ::after для создания блока 0px -height после , который эффективно перемещает все после на следующую строку:
h5 {
дисплей: встроенный;
}
h5 :: после {
содержание: "";
дисплей: блок;
} <ул>
Подзаголовок
Текст, текст, текст, текст, текст.0
Я знаю, что опаздываю на вечеринку, но вот мои пять копеек.
CSS
ли h5 {
перерыв после: всегда;
}
ли h5 :: после {
дисплей: блок;
содержание: " ";
}
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Как добавить разрыв строки перед элементом с помощью CSS
В этом уроке мы покажем несколько способов добавления разрыва строки перед элементом.
Это можно легко сделать с помощью нескольких шагов.
Нам нужно использовать свойство пробела CSS, чтобы указать, как должно обрабатываться пространство внутри элемента. В частности, мы будем использовать значение «pre» этого свойства.
Начните с создания HTML.
- Используйте элемент
и три элемента
.
W3Docs
Книги
Викторины
Фрагменты
- Используйте псевдоэлемент ::before.
- Добавьте в содержимое символ возврата каретки (\A).
- Установите для свойства пробела значение «pre».
р::до {
содержимое: "\А";
пробел: предварительно;
} Здесь вы можете увидеть полный код.
Пример добавления разрыва строки перед элементами
с псевдоэлементом :before:
<голова>
Название документа
<стиль>
р :: до {
содержимое: "\А";
пробел: предварительно;
}
<тело>
Документы W3
Книги
Викторины
Фрагменты
Попробуй сам »
Результат
Книги
Тесты
Фрагменты
В следующем примере разрыв строки перед элементом также добавляется с помощью псевдоэлемента :before и с помощью символа возврата каретки и свойства отображения, установленного на « block-level», потому что блочные элементы начинаются с новой строки, заполняя всю доступную ширину.
Здесь мы используем элементы .
Пример добавления разрыва строки перед элементами
с псевдоэлементом :before:
<голова>
Название документа
<стиль>
диапазон:: до {
содержимое: "\А";
пробел: предварительно;
дисплей: блок;
}
<тело>
Документы W3
Книги
Викторины
Фрагменты
Попробуй сам »
В нашем последнем примере разрыв строки добавляется без использования псевдоэлемента :before. Мы только устанавливаем для свойства пробела значение «pre-line» для элемента
.
Пример добавления разрыва строки перед элементом без псевдоэлемента :before:
<голова>Название документа <стиль> п { цвет: #fc0303; пробел: до строки; размер шрифта: 20px; } <тело>Документы W3
<р> Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый при выпуске печатных, графических или веб-дизайнов.
