Как сделать чтобы текст переносился css

Перенос слов в тексте html, css

@humster_spb Да, указано. Но это не суть. Оно все равно режет слова, а мне нужно, чтобы перенос был от последнего пробела.

7 фев 2018 в 19:49

В актуальных версиях Chrome и FF приведённый стиль обеспечивает перенос содержимого тега pre по словам. Проблема не воспроизводится. Нужно больше подробностей.

7 фев 2018 в 19:53

Chrome, кстати, вообще не поддерживает значение auto для hyphens — переносы не работают, слова перемещаются на новую строку целиком

7 фев 2018 в 19:55
@Streletz Еще подключен bootstrap. Вполне возможно, что там прописано что-то для
7 фев 2018 в 20:06

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

По умолчанию именно так и работает — перенос по словам.
Если по какой-то причине происходит разрыв слова, то дело в word-break .
Помимо этого, исправить можно одним из следующих способов:

pre < white-space: pre-wrap; overflow: auto; border: 1px dotted red; width: 32ch; float: left; margin: .5em; min-height: 7em; >.break < word-break: break-all; >.cancel < word-break: break-word; word-wrap: break-word; overflow-wrap: break-word; >.to-normal < word-break: normal; word-wrap: normal; overflow-wrap: normal; >pre:before

пылесосный пылесосательный пылесос 1234567890123456789012345678901234567890 пылесосный пылесосательный пылесос 1234567890123456789012345678901234567890 пылесосный пылесосательный пылесос 1234567890123456789012345678901234567890 пылесосный пылесосательный пылесос 1234567890123456789012345678901234567890

text-overflow

Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие. text-overflow работает в том случае, если для блока значение свойства overflow установлено как auto , scroll или hidden .

Синтаксис

text-overflow: clip | ellipsis

Значения

clip Текст обрезается по размеру области. ellipsis Текст обрезается и к концу строки добавляется многоточие.

HTML5 CSS3 IE Cr Op Sa Fx

text-overflow

Результат данного примера показан на рис. 1.

Многоточие в конце текста

Рис. 1. Многоточие в конце текста

Браузеры

Opera с версии 9.0 до версии 11.0 использует нестандартное свойство -o-text-overflow .

Перенос, обрезка и ориентация текста в CSS

white-space – это свойство, с помощью которого можно указать браузеру как он должен обрабатывать пробелы в тексте.

По умолчанию браузеру не важно как отформатирован текст внутри HTML-документа. В своей работе он опирается только на теги. Переносы строк, которые мы делаем с помощью клавиши Enter , он заменяет на пробелы. А несколько подряд идущих пробелов выводит как один. Текст, который не помещается в строку, переносится на следующую. При этом текст переносится только по символам пробела.

Исходный HTML-текст, содержащий пробелы и переносы строк:

CSS-свойство white-space. Исходный HTML-текст, содержащий пробелы и переносы строк

Как он отображается в браузере:

CSS-свойство white-space. То как отображается исходный HTML-текст, содержащий пробелы и переносы строк

Когда пробелов или тире в тексте нет, браузер его не переносит. В этом случае текст может выйти за границы элемента:

CSS-свойство white-space. Длинный текст, который выходит за границы элемента

Также это переполнение может послужить тем, что элемент станет шире страницы и у неё появится нежелательная горизонтальная прокрутка.

Это поведение браузера по умолчанию или иными словами, когда свойство white-space имеет значение normal .

Но это можно изменить, если установить white-space другие значения:

nowrap – то же самое что и normal , но без автоматического переноса текста по символам пробела (то есть размещается в одну строку);
pre – выводится так, как указано в HTML-документе (то есть сохраняются пробелы и переносы строк из HTML, автоматического переноса текста по пробелам нет);
pre-wrap – похож на pre , но здесь текст при достижении границы элемента будет автоматически переносится на новую строку;
pre-line – похож на pre-wrap , но здесь несколько подряд идущих пробелов заменяются на один;
break-spaces – похож на pre-wrap , но отличается от него алгоритмом разбивки пробелов в конце строки.

Установка white-space: nowrap выведет весь текст в одну строку:

CSS-свойство white-space: nowrap

Свойство white-space: pre отображает текст так как он отформатирован в HTML (выделение желтым цветом сделано для наглядности):

CSS-свойство white-space: pre

Свойство white-space: pre-wrap в отличие от white-space: pre автоматически перенесёт текст, который не помещается в строку:

CSS-свойство white-space: pre-wrap

Свойство white-space: pre-line в отличие pre-wrap дополнительно ещё заменяет все подряд идущие пробелы на один:

CSS-свойство white-space: pre-line

Значение break-spaces делает тоже самое что pre-wrap . Отличаются они только тем, как выполняется обработка пробелов конце строки. Чтобы показать это более наглядно мы специально добавили много пробелов между словами «это» и «свойство».

CSS-свойство white-space: break-spaces

Таким образом, при pre-wrap (верхняя часть картинки) они остаются у текущей строки и просто переполняют элемент. Значение break-spaces (нижняя часть картинки) делает это по-другому. Она оставляет в текущей строке столько пробелов сколько возможно до переполнения, а остальные переносит на следующую строку.

Обрезка текста (text-overflow)

CSS-свойство text-overflow предназначено для задания того, как должен обрезаться текст, который выходит за границу элемента. Оно работает только в том случае, если у элемента присутствуют свойства white-space: nowrap и overflow со значением hidden , scroll или auto .

Оно может принимать два значения:

clip (по умолчанию) – обрезает текст по границе элемента;
ellipsis – обрезает текст и отображает в его конце многоточие.

.item { white-space: nowrap; overflow: hidden; text-overflow: clip; /* просто с обрезкой */ text-overflow: ellipsis; /* с многоточием в конце */ }

CSS-свойство text-overflow с помощью которого мы можем определить, как должен обрезаться текст, который выходит за границу элемента

Перенос слов при переполнении (overflow-wrap)

overflow-wrap – это CSS-свойство, которое позволяет указать необходимо ли переносить слова, выходящие за границы элемента. По умолчанию overflow-wrap имеет значение normal . Это означает, что слова могут разрываться только в определённых местах, например, когда имеется пробел или дефис.

Два других значения ( break-word и anywhere ) указывают браузеру, что он должен вставлять разрывы в неразрывную строку. При этом разрыв создается только в том случае, если всё слово не может быть помещено в отдельную строку без переполнения. В этом случае разорвано слово может быть на любом символе, если в ней нет других приемлемых точек разрыва.

CSS-свойство overflow-wrap

.item-1 { overflow-wrap: normal; } .item-2 { overflow-wrap: anywhere; } .item-3 { overflow-wrap: break-word; }

Браузер, когда нам необходимо, чтобы контент занимал минимальную ширину ( width: min-content ), при установке overflow-wrap: anywhere может расставлять мягкие переносы на своё усмотрение:

.item-1 { width: min-content; overflow-wrap: anywhere; } .item-2 { width: min-content; overflow-wrap: break-word; }

Расчёт размеров минимального содержимого с учётом установенной опции overflow-wrap: anywhere

Ещё один интересный пример с текстом в анинимном flex-элементе:

 ��‍♂️Я забыыыыыыыыыыыыыыыыл о свойстве, которое позволяет переносить слова, выходящие за границы элемента. 我忘記了允許您包裝超出元素邊界的單詞的屬性。
 ��‍♂️Я забыыыыыыыыыыыыыыыыл о свойстве, которое позволяет переносить слова, выходящие за границы элемента. 我忘記了允許您包裝超出元素邊界的單詞的屬性。

Текст в анонимном flex-элементе, который выходит за границы элемента

Переполнение при overflow-wrap: break-word происходит потому, что flex-элемент по умолчанию имеет в качестве минимальной ширины значение auto , то есть min-width: auto . Так как стилизиовать анонимный flex-элемент мы не можем, то чтобы исправить эту ситуацию, нам необходимо обернуть текст в какой-нибудь тег, например, и установить ему min-width: 0 :

  ��‍♂️Я забыыыыыыыыыыыыыыыыл о свойстве, которое позволяет переносить слова, выходящие за границы элемента. 我忘記了允許您包裝超出元素邊界的單詞的屬性。

В CSS, кроме overflow-wrap , имеются ещё следующие свойства: word-wrap и word-break .

Свойство word-wrap существовало до overflow-wrap . Оно было не официальным, но поддерживалось в то время большинством браузеров. Сейчас данное свойство использовать не рекомендуется. Его имеет смысл использовать, только если нужно обеспечить поддержку старых браузеров:

.el { word-wrap: break-word; overflow-wrap: break-word; }

Свойство word-break определяет нужно ли разрывать слово при достижении границы родительского элемента. Данное свойство имеет следующие значения:

normal (по умолчанию) – слова и строки с неразрывным пробелом могут разрываться только в определённых местах, например, когда имеется пробел или дефис;
break-all – выполняет разрыв слова именно в том месте, в котором происходит переполнение, но только для текста не на китайском, японском и корейском языках (CJK);
keep-all – запрещает перенос текста на китайском, японском или корейском языках (CJK), на других языках аналогично значению normal ;
break-word (устаревшее, использовать не рекомендуется) – делает тоже самое, что и overflow-wrap: anywhere .

На практике значение keep-all может использоваться для корейского языка (в котором используются пробелы между словами), а также для текста со смешанным шрифтом, где фрагменты CJK смешиваются с другим языком, который использует пробелы для разделения. Значение break-all может применяться для текста, преимущественно состоящего из символов CJK с короткими выдержками, отличными от CJK.

Для разрыва строк текста на китайском, японском и корейском языках (CJK) имеется ещё свойство line-break . Оно определяет строгость правил разрыва строк и имеет следующие значения: auto (по умолчанию), loose , normal , strict и anywhere . Эти свойства ( word-break и line-break ) играют важную роль для текстов CJK.

Расстановка переносов (hyphens)

hyphens – это CSS-свойство, с помощью которого мы можем управлять расстановкой переносов через дефис в словах, когда строка переносится на несколько строк. С помощью него мы можем запретить расстановку переносов через дефис, разрешить её или выполнять только при наличии определенных символов.

Обратите внимание, что hyphens зависит от языка, который в HTML определяется атрибутом lang . Браузер будет расставлять переносы только в том случае, если атрибут lang присутствует в HTML-документе и в нём имеется соответствующий этому языку словарь для расстановки переносов.

Данное свойство имеет следующие значения:

none – запретить расстановку переносов в словах через дефис;
manual (по умолчанию) – слова будут переноситься через дефис только в местах, где проставлены символы ручного переноса и ‐ ;
auto – на усмотрение браузера, то есть в соответствии с символами ручного переноса и правилами на основе языка.

На практике очень частно свойство hyphens используется совместно с overflow-wrap . Рассмотрим следующий пример:

Я знаю свойство hyphens, которое позволяет нам Я знаю свойство hyphens, которое позволяет нам управлять расстановкой перено‐сов через дефис в словах, когда строка переносится на несколько строк.
 Я знаю свойство hyphens, которое позволяет нам управлять расстановкой перено‐сов через дефис в словах, когда строка переносится на несколько строк.

CSS-свойство hyphens, с помощью которого мы можем управлять расстановкой переносов через дефис в словах, когда строка переносится на несколько строк

Здесь с помощью символа мы создали мягкий перенос в слове управлять . Теперь браузер может ориентироваться на указанное место, если ему потребуется перенести это слово.

Символ ‐ создаёт жёсткий разрыв строки. В примере мы его сделали в слове перено‐сов . Такой дефис будет отображаться всегда, даже если в этом месте нет фактического переноса.

Режимы письма (writing-mode)

Свойство writing-mode определяет:

block flow direction, то есть направление потока, в котором будут складываться блоки внутри контейнера (это может быть сверху вниз, слева направо или справа налево);
inline flow direction, то есть направление в котором контент (например, буквы и слова) будут двигаться внутри строк текста, а также где будет начинаться новая строка (оно может быть горизонтальным или вертикальным).

Свойство writing-mode может принимать следующие значения: horizontal-tb (значение по умолчанию), vertical-lr и vertical-rl .

CSS-свойство writing-mode, с помощью которого мы можем управлять направлением блочного и строчного потока

Направление потока в котором движутся блоки:

horizontal-tb – свеху вниз;
vertical-lr – слева направо;
vertical-rl – справа налево.

При этом inline-направление зависит не только от writing-mode , но и свойства direction . Здесь поток движется:

слева направо при writing-mode: horizontal-tb и direction: ltr ;
справа налево при writing-mode: horizontal-tb и direction: rtl ;
сверху вниз при writing-mode: vertical-lr и direction: ltr ;
снизу вверх при writing-mode: vertical-rl и direction: rtl.

  First paragraph
 Second paragraph
 Third paragraph
 .

Пример использования CSS-свойство writing-mode для управления направлением блочного и строчного потока

Ориентация текста (text-orientation)

CSS-свойтство text-orientation позволяет настроить ориентацию текста внутри строки. Его необходимо использовать вместе с writing-mode . Свойство text-orientation будет работать только в том случае, если для writing-mode установлено значение vertical-rl или vertical-lr .

Свойство writing-mode может принимать следующие значения:

mixed (по умолчанию) – символы горизонтальных шрифтов будут повёрнуты на 90 градусов по часовой стрелке, а вертикальных останутся без изменений;
upright – символы отображаются в обычном виде (без поворота), но распологаются друг под другом (вертикально);
sideways – символы располагаются так, как они располагались бы в горизонтальном режиме, но при повороте всей строки на 90° по часовой стрелке.

  Этот абзац написан на русском языке.
 この段落は日本語で書かれています

Как сделать или запретить перенос текста CSS

Как правило, текст в HTML переносится автоматически, если он не помещается в одну строку, но бывают случаи, когда текст необходимо перенести, или наоборот запретить перенос. Для того, чтобы запретить перенос текста можно использовать свойство white-space со значением nowrap, а для того, чтобы текст переносился можно использовать с свойство word-wrap со значением break-word.