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

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

  • автор:

Свойство overflow-wrap

Свойство overflow-wrap позволяет перенести буквы длинного слова на новую строку, если это слово не влазит в ширину контейнера.

Синтаксис

Значения

Значение Описание
break-word Заставляет длинные слова переноситься на новую строку, если это слово не помещается в контейнер. При этом слово начнется с новой строки.
normal Стандартное поведение: если длинное слово не влазит по ширине в контейнер — оно просто вылезет за его границу (при этом начнется с новой строки).

Значение по умолчанию: normal .

Пример . Значение normal

В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы (при этом начнется с новой строки):

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

#elem < word-wrap: normal; overflow-wrap: normal; border: 1px solid red; width: 200px; >

Пример . Значение break-word

А теперь те буквы, которые не помещались, просто перенесутся на следующую строку (при этом длинное слово все равно будет начинаться с новой строки):

Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit.

#elem < overflow-wrap: break-word; border: 1px solid red; width: 200px; >

Смотрите также

  • свойство word-break ,
    которое также позволяет перенести буквы длинного слова на новую строку
  • свойство word-wrap ,
    которое является устаревшим названием свойства overflow-wrap
  • свойство hyphens ,
    которое включает переносы слов по слогам
  • тег wbr ,
    который реализует мягкие переносы средствами HTML
  • тег br ,
    с помощью которого можно принудительно заставить перенести текст на новую строку

Где всё сложно с переносами строк. Вот все CSS- и HTML-хитрости для этого

Скажем, есть действительно длинное слово в каком-то тексте, у контейнера которого недостаточно ширины для него. Типичная причина этого — длинный URL, просочившийся в текст. Что происходит? Зависит от CSS. Как этот CSS управляет раскладкой и как он этим текстом распоряжается.

Вот как может выглядеть ситуация с не поместившимся текстом:

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

Первое решение — overflow: hidden; , как этакий «лобовой» прием, чтобы не дать тексту (и чему угодно) высовываться. Но от этого пострадает доступность текста. В некоторых десктопных браузерах для выделения текста можно три раза кликнуть на нем мышью, но не каждый может об этом знать и не всегда такое возможно.

Название свойства « overflow » — «переполнение» — здесь весьма к месту, ведь именно оно, переполнение, у нас и происходит. Ещё есть overflow: auto; , приводящее к горизонтальному скроллу. Иногда может и подойди, но наверняка вы тоже согласитесь, что обычно это решение неприемлемо.

Нам нужно, чтобы этот зараза длинный URL (или любой текст) разорвался, чтобы перенестись на следующую строку. Варианты есть! Для начала подготовим место, где мы будем со всем этим разбираться.

Экспериментальная площадка

Здесь я взял блок с содержимым, размер которого можно менять, и решил соединить его с разными CSS-свойствами и их значениями, которые можно включать/выключать, чтобы увидеть, как это влияет на содержимое.

Уверен, что этот список неполный и не идеальный. Это лишь некоторые из знакомых мне свойств.

Кувалда: word-break: break-all;

Позволяет словам разрываться везде. Свойство word-break «решает» проблему:

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

Прицельное решение: overflow-wrap: break-word;

Свойство overflow-wrap кажется наиболее эффективным решением для данной проблемы.

На первый взгляд это может походить на демо с word-break: break-all; выше, но заметьте, как в URL оно не разрывает «pen» как «pe\n», а делает перенос в конце этого слова, рядом со слешем.

Если слово не может разорваться, переполняя контейнер, оно может разорваться где угодно во избежание переполнения.

Решение потяжелее, иногда: hyphens: auto;

Свойство hyphens может иногда решить проблему с URL-адресами и длинными словами, но это не точно. На длинном числе, например, он споткнется. Вдобавок, hyphens влияет на весь текст, позволяя себе вольности в разрывах ради того, чтобы сделать правый край текста более ровным.

fantasai сказала мне:

Если «слово» находится в конце строки, его можно переносить через дефис.

Думаю, это «слово» в кавычках дает подсказку, в чем тут проблема. Некоторые неприемлемо длинные строки — не «слова», поэтому это решение — не панацея.

Будущая кувалда: line-break: anywhere;

Есть свойство line-break . В основном, кажется оно для пунктуации, но ни в одном браузере оно у меня не заработало. fantasai сказала мне, что появится новое значение anywhere , которое:

«как word-break: break-all; » за исключением того, что она на самом деле разрывает всё, как примитивная программа на терминале.

Другие решения в HTML

Элемент
разобъёт строку где угодно, если только у него не будет display:none .

Элемент — «возможный разрыв слова», что означает, что длинному слову, обычно вызывающему раздражающую проблему с переполнением можно сказать, чтобы оно разорвалось в конкретном месте. Полезно! Оно ведёт себя, как пробел нулевой ширины.

Другие решения на CSS

Символ ­ ­ делает то же самое, что и элемент (На самом деле не совсем, поскольку, в отличие от , ­ добавляет дефисы при переносе. — прим. перев.)

Можете вставить разрыв строки с помощью псевдоэлемента ::before < content: "\A"; >, если только элемент не строчный (в противном случае потребуется white-space: pre; )

P.S. Это тоже может быть интересно:
  • Голограммы, пленочные засветки и шейдеры на чистом CSS
  • Псевдокласс :has() — не только «родительский селектор»
  • CSS COLORS

Если вам понравилась статья, поделитесь ей!

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

Иногда возникает ситуация, когда какой-то текст или слово не помещается в блоке и нужно перенести его на следующую строку.

long_text

Чтобы поправить ситуацию можно пойти разными путями. Например с помощью специального символа ­ вручную установить перенос там где требуется.

­__н____н____о____е 

Или например с помощью CSS свойства word-break — управляет переносом длинных слов (normal — не переносить, если перенос не задан явно, break-all — принудительно переносить, keep-all — не переносить, даже если слово содержит дефис).

 Напишем тут очень д____л____и____н____н____о____е слово которое по идее должно перенестись на след строку. 
.long-text  border: 1px solid #245488; padding: 10px; width: 170px; word-break: break-all; > 

long_text_break

Результат:

Перенос слов в тексте 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

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

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