Свойство 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 кода
Пробел — Tailwind CSS
Основы использования
Нормальный
Используйте whitespace-normal для нормального переноса текста внутри элемента.
Новые строки и пробелы будут свернуты.
Всем привет! Уже почти 2022 год, а мы до сих пор не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, который это пишет, инопланетянин. Ты никогда не узнаеешь.
<div> <div>Всем привет! Почти 2022 год, а мы все еще не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, пишущий это, инопланетянин.. Ты никогда не узнаеешь.</div> </div>
Без переноса
Используйте whitespace-nowrap, чтобы предотвратить перенос текста внутри элемента. Новые строки и пробелы будут свернуты.
Всем привет! Уже почти 2022 год, а мы до сих пор не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, который это пишет, инопланетянин. Ты никогда не узнаеешь.
<div> <div>Всем привет! Почти 2022 год, а мы все еще не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, пишущий это, инопланетянин.. Ты никогда не узнаеешь.</div> </div>
</div>
</div>Пре
Используйте whitespace-pre, чтобы сохранить символы новой строки и пробелы внутри элемента. Текст не переносится.
Всем привет!
Уже почти 2022 год, а мы до сих пор не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, который это пишет, инопланетянин.
Ты никогда не узнаеешь.
<div> <div>Всем привет! Почти 2022 год, а мы все еще не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, пишущий это, инопланетянин.. Ты никогда не узнаеешь.</div> </div>
Пре линия
Используйте whitespace-pre-line, чтобы сохранить символы новой строки, но не пробелы внутри элемента. Текст будет перенесен в обычном режиме.
Всем привет!
Уже почти 2022 год, а мы до сих пор не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, который это пишет, инопланетянин.
Ты никогда не узнаеешь.
<div> <div>Всем привет! Почти 2022 год, а мы все еще не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, пишущий это, инопланетянин.. Ты никогда не узнаеешь.</div> </div>
Пре перенос
Используйте whitespace-pre-wrap, чтобы сохранить символы новой строки и пробелы внутри элемента. Текст будет перенесен в обычном режиме.
Всем привет!
Уже почти 2022 год, а мы до сих пор не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, который это пишет, инопланетянин.
Ты никогда не узнаеешь.
<div> <div>Всем привет! Почти 2022 год, а мы все еще не знаем, живут ли среди нас инопланетяне или нет? Может быть, человек, пишущий это, инопланетянин.. Ты никогда не узнаеешь.</div> </div>
Применяя условно
Наведение, фокус и другие состояния
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:whitespace-pre to only apply the whitespace-pre utility on hover.
<div> <!-- ... --> </div>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
Контрольные точки и медиа-запросы
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:whitespace-pre to apply the whitespace-pre utility at only medium screen sizes and above.
<div> <!-- ... --> </div>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.
html — Как не переносить содержимое div?
спросил
Изменено 2 года, 5 месяцев назад
Просмотрено 231 тысяч раз
У меня есть div с фиксированной шириной и двумя кнопками.
Если метки кнопок слишком длинные, они переносятся — одна кнопка остается на первой строке, а следующая кнопка следует под ней, а не рядом с ней.
Как заставить div расширяться так, чтобы обе кнопки были на одной строке?
- HTML
- CSS
2
Попробуйте пробел: nowrap;
Документация: https://developer.mozilla.org/docs/Web/CSS/white-space
1 Комбинация обоих поплавков: левый; пробел: nowrap; работал на меня.
Каждый из них самостоятельно не добился желаемого результата.
Я не знаю причин этого, но я установил для своего родительского контейнера значение display:flex , а для дочерних контейнеров — значение display:inline-block , и они остались встроенными, несмотря на то, что общая ширина дочерних элементов превышает родительскую .
Не нужно было играть с max-width , max-height , white-space или чем-то еще.
Надеюсь кому-нибудь поможет.
1
Если вас не волнует минимальная ширина элемента div и вы просто не хотите, чтобы элемент div расширялся по всему контейнеру, вы можете перемещать его влево — плавающие элементы div по умолчанию расширяются, чтобы поддерживать свое содержимое, например так :
<форма>
<дел>
Если ваш div имеет фиксированную ширину, он не должен расширяться, потому что вы зафиксировали его ширину. Однако современные браузеры поддерживают свойство CSS min-width .
Вы можете эмулировать свойство min-width в старых браузерах IE, используя выражения CSS или используя автоматическую ширину и наличие объекта-разделителя в контейнере.
Это решение не элегантно, но может помочь:
<дел>
Если кнопки останутся в одной строке, они выйдут за пределы фиксированной ширины блока, в котором они находятся. Если вас это устраивает, вы можете создать еще один блок внутри блока, который у вас уже есть. Новый div, в свою очередь, будет содержать кнопки и иметь фиксированную ширину, которая зависит от того, сколько места две кнопки должны оставаться в одной строке.
Вот пример:
<дел> <кнопка>1 <кнопка>2
код http://jsbin.com/eveqe3/edit, также приведенный ниже.