Как сделать перенос текста css
Перейти к содержимому

Как сделать перенос текста css

  • автор:

Перенос, обрезка и ориентация текста в 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° по часовой стрелке.
  

Этот абзац написан на русском языке.

この段落は日本語で書かれています

hyphens

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

Интерактивный пример

Правила расстановки переносов зависят от языка. В HTML язык определяется атрибутом lang , и браузеры применяют правила переноса только при присутствии данного атрибута и доступности соответствующего словаря для расстановки переносов. В XML необходимо использовать атрибут xml:lang (en-US) .

Примечание: Правила, определяющие, как выполняется расстановка переносов, явно не определены в спецификации, поэтому точная расстановка переносов может варьироваться от браузера к браузеру.

Синтаксис

/* Keyword values */ hyphens: none; hyphens: manual; hyphens: auto; /* Global values */ hyphens: inherit; hyphens: initial; hyphens: unset; 

Свойство hyphens задаётся как одно из ключевых значений, выбранного из списка ниже.

Значения

Слова не разрываются при переносе строки, даже если внутри слов указаны точки разрыва. Строки будут переноситься только по пробелам.

Слова разрываются при переносе строки только там, где символы внутри слов указывают точки разрыва. Подробнее смотреть ниже Предлагаемые возможности разрыва строки.

Браузер может автоматически разбивать слова в соответствующих точках переноса, следуя любым правилам, которые он выбирает. Однако предлагаемые возможности разрыва строки (смотреть Предлагаемые возможности разрыва строки ниже) переопределят автоматический выбор точки разрыва, если таковые имеются.

Примечание: Поведение параметра auto зависит от того, на каком языке применяются правила переноса. Вы должны указать язык с помощью HTML атрибута lang , чтобы гарантировать, что на этом языке применяется автоматическая расстановка переносов.

Предлагаемые возможности разрыва строки

Для указания потенциальных точек разрыва строки в тексте вручную используются два символа Unicode:

«Жёсткий» дефис указывает на возможность видимого разрыва строки. Даже если строка в этом месте не переносится, дефис всё равно отображается.

Невидимый «мягкий» перенос. Этот символ не отображается визуально, вместо этого он отмечает место, где браузер должен разорвать слово, если расстановка переносов необходима. В HTML, используйте ­ для вставки мягкого дефиса.

Формальное определение

Начальное значение manual
Применяется к все элементы
Наследуется да
Обработка значения как указано
Animation type discrete

Как сделать перенос слов?

Переносы слов в тексте используются для разбиения длинных слов, когда они не помещаются на одной строке. Переносы делают текст удобнее для чтения, облегчают восприятие информации и оптимальнее распределяют слова в абзаце.

HTML переносит слова на другую строку целиком, без учёта правил расстановки переносов. Из-за этого правый край абзаца выглядит неровным и напоминает «лесенку» (рис. 1).

Вид текста без переносов

Рис. 1. Вид текста без переносов

Выравнивание текста по ширине убирает неровность правого края (рис. 2), но между некоторыми словами появляются слишком широкие промежутки.

Текст, выровненный по ширине

Рис. 2. Текст, выровненный по ширине

Расстановка переносов слов позволяет оптимизировать пробелы между словами и повысить эстетическую привлекательность блока текста. Есть несколько вариантов как этого добиться: с помощью элемента , используя спецсимвол ­ и через свойство hyphens.

Использование элемента

Пример 1. Использование

Переносы

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

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

Текст с переносами

Рис. 3. Текст с переносами

У есть определённые недостатки, в частности, при переносе не добавляется дефис, обозначающий перенос.

Использование спецсимвола ­

Спецсимвол ­ начинается со знака амперсанда (&) и завершается точкой с запятой. Работает этот спецсимвол схожим с образом — там, где в тексте встречается ­ , браузер при необходимости добавляет перенос слова (пример 2).

Пример 2. Использование ­

Переносы

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

Результат данного примера показан на рис. 4. Обратите внимание, что ­ при переносе слов добавляет символ дефиса.

Текст с переносами

Рис. 4. Текст с переносами

Использование свойства hyphens

Перечисленные выше методы имеют один минус — это ручная расстановка переносов в тексте. Свойство hyphens же задействует встроенный в браузер словарь, в котором, в том числе, указаны правила переноса множества слов.

Чтобы браузер понимал, с каким языком и словарём он должен работать, к тексту следует добавить атрибут lang с кодом языка. К примеру, кодом русского языка будет ru, английского — en, украинского — uk и т. д.

Если на сайте предполагается один язык (к примеру, весь сайт только на русском), то атрибут lang пишется в элементе . В случае использования нескольких языков, lang добавляется к абзацу

или другому подходящему текстовому элементу.

Для автоматической работы свойство hyphens задаём со значением auto и добавляем это свойство к абзацу, как показано в примере 3.

Пример 3. Использование hyphens

Переносы

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

Результат данного примера показан на рис. 5. Расстановка переносов будет происходить автоматически, в зависимости от ширины окна браузера.

Текст с автоматической расстановкой переносов

Рис. 5. Текст с автоматической расстановкой переносов

Свойство hyphens допустимо комбинировать с другими методами. К примеру, в случаях, когда в тексте встречаются сложные специфичные термины, для которых в словаре не нашлось места, или по другим причинам.

В примере 4 в некоторые химические названия вставляется спецсимвол ­ , при автоматической расстановке переносов с помощью свойства hyphens .

Пример 4. Сочетание ­ и hyphens

Переносы

Некоторые из циклопентадиенилкарбонилов металлов чрезвычайно чувствительны к воздуху (например, циклопентадиенил­трикарбонил­гидрид хрома), другие (например, циклопентадиенил­трикарбонил­марганец) почти совершенно устойчивы на воздухе. Большинство таких соединений довольно устойчиво в чистом состоянии и менее устойчиво в растворе. Обычно с растворами работают в атмосфере азота или двуокиси углерода в сухих боксах. Это устраняет причину значительных потерь вещества.

Синтезы неорганических соединений. Том II. Под редакцией У. Джолли

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

Автоматические и ручные переносы в тексте

Рис. 6. Автоматические и ручные переносы в тексте

См. также

  • hyphenate-character
  • hyphenate-limit-chars
  • hyphens
  • Работа с текстом

Как сделать принудительный перенос текста?

Есть несколько слов. Как сделать, чтобы текст после первого слова переносился на новую строчку? Сделать нужно без html т.е br не подойдет.

  • Вопрос задан более года назад
  • 280 просмотров

2 комментария

Простой 2 комментария

delphinpro

Сергей delphinpro @delphinpro Куратор тега CSS

MrDecoy

Вадим @MrDecoy Куратор тега CSS
Если там чисто текст, и первое слово ни во что не обёрнуто, то без html или js — никак.
Решения вопроса 0
Ответы на вопрос 2

mizutsune

Frontend Developer

Если верстка имеет примерно такой вид:

Lorem ipsum dolor sit amet consectetur adipisicing elit

А нужно чтобы было так:

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Тогда, увы, но средствами CSS такого эффекта добиться не выйдет. В CSS имеется псевдоэлемент ::first-letter для стилизации первой буквы в строке, но нет псевдоэлемента :first-word, который мог бы дать возможность стилизовать первое слово. Так что как вариант, можно обернуть первое слово в дополнительный тег, например в span через html руками или через JS. После чего станет доступна стилизация первого слова. Ну или всё таки вставить тег br в нужном месте.

Например можно сделать как-то так:

Lorem ipsum dolor sit amet consectetur adipisicing elit

const target = document.querySelector(".target"); target.innerHTML = target.innerText .split(" ") .map((w, i) => (i > 0 ? w : `$ `)) .join(" ");
.target > span:first-child

В результате, все слова идущие после первого слова, будут на новой строке.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *