Как в Excel сделать перенос текста в ячейке. Разрыв строки в HTML: используем тег br

Апрель 10, 2016

Всем привет). Я продолжаю писать о различных полезных свойствах языка css, которые так или иначе могут помочь при верстке. И сегодня я хочу рассказать, как делать в css перенос слов, если они не влазят в свой контейнер. Я покажу вам все на реальном примере.

Включаем перенос для слов, которые не влезают

Допустим, у меня есть блок, шириной 100 пикселей и мне в него нужно написать какой-то текст. В тексте попадается слово «самораспаковывающийся» . Таким бывает архив, например) Но не суть. Слово очень длинное, оно просто не влезет в контейнер по ширине. Давайте его напишем в такой узкий блок (100 пикселей). Что будет?

Как видим, бедное слово вылезло за пределы контейнера, ну деваться ему некуда, что поделаешь. И это без отступов. Так вот, тут на помощь приходит свойство word-wrap. Вот что нужно задать блоку, чтобы включить перенос слов по буквам в нем:

Word-wrap: break-word;

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

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

В каких случаях использовать word-wrap

Собственно, пока я вижу 2 варианта использования. Первый — как раз для узких блоков, где вы опасаетесь, что длинные слова могут некрасиво вылезти за границы блока. Второй — это когда дизайнер задумал так, чтобы название сайта было в несколько строк.

Итак, в этой статье мы узнали, как делать перенос слов в css. На этом у меня сегодня все. До встречи.

Труднопереносимыми бывают не только люди, но и слова. К примеру, химическое соединение очень похожа на некоторых людей с «подвывертом »! Не знаем, как справляться с такими трудными личностями, но с переносом слов CSS точно поможет:

Зачем переносить «непереносимое»

В большинстве случаев при отображении текстового содержимого веб-страниц в браузере перенос слов не применяется. Если слово не вмещается целиком в область экрана, то по умолчанию оно полностью «переезжает » на следующую строчку.

Частичный перенос применяется лишь к длинным и сложным словам, состоящим из нескольких терминов и разделенных дефисом. Вот тут и возникают проблемы отображения этих слов на разных по диагонали экранах и в разных браузерах. При этом точно предугадать, как длинное слово будет «выглядеть » на клиентской стороне трудно, поэтому задавать переносы «вручную » бессмысленно:

Решаем проблему переноса слов с помощью HTML

Перед тем, как рассмотреть перенос длинных слов в CSS , изучим возможности решения этой проблемы с помощью языка гипертекста.
Для этого в HTML имеется несколько вариантов:

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

Пример сложного химического соединения и текста - метилпропенилендигидрок-сициннаменилакрилическая кислота

  • Использование тега - элемент появился в HTML 5 . Он также служит для указания браузеру места для разрыва сложного или длинного слова. Но в отличие от предыдущего спецсимвола этот тег не выводит в месте «разлома » знак переноса, что может негативно сказаться на читаемости всего текста:

метилпропенилендигидроксициннаменилакрилическая кислота

В некоторых браузерах поддержка тега реализована некорректно. В них он будет работать, если для него в коде CSS прописано свойство display со значением inline-block.

Перенос слов средствами CSS

Перед тем, как запретить перенос слов в CSS , давайте рассмотрим несколько свойств, способных разрешить основную проблему:

  1. word-wrap – описывает, как производить перенос слов, которые по длине не помещаются в установленные размеры контейнера. Сразу стоит предупредить, что с валидацией этого свойства возникают проблемы, и с реализацией его поддержки в CSS консорциум W3C еще не определился. Поэтому специализированные валидаторы при наличии word-wrap в коде будут выдавать ошибку:

Тем не менее, это свойство «воспринимается» всеми современными браузерами и является эффективным решением проблемы переноса длинных слов. word-wrap принимает следующие значения:

  • normal – слова не переносятся;
  • break-word – автоматический перенос слов;
  • inherit – наследование значения родителя.

Пример, иллюстрирующий применение этого свойства:

метилпропенилендигидроксициннаменилакрилическая кислота

В новой спецификации CSS свойство word-wrap было переименовано в overflow-wrap . Оба свойства принимают одинаковые значения. Но поддержка overflow-wrap пока реализована слабо, поэтому лучше использовать старую версию свойства:

Как видно на расположенном выше скриншоте, новое свойство поддерживается Google Chrome , но не поддерживается в IE . Поэтому overflow-wrap лучше не использовать для переноса слов в CSS .

  1. word-break – устанавливает правила переноса строк внутри контейнера, если они не помещаются в него по ширине. Это новое свойство, и его поддержка была реализована в CSS3 . Оно является валидным, но предназначено для работы со строками, поэтому перенос слов может производиться грамматически неправильно.

Свойство принимает три значения:

  • normal – используются правила переноса, установленные по умолчанию;
  • word-break – перенос строк осуществляется автоматически, чтобы слово поместилось в установленные по ширине размеры контейнера;
  • keep-all – отключает автоматический перенос слов в китайском, японском и корейском. Для остальных языков действие значения аналогично normal.

Синхрофазотрон

Обеспокоенное состояние

Одиннадцатиклассница

метоксихлордиэтиламинометилбутиламин

  1. hyphens – новое свойство, которое появилось с выходом CSS3 . Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает несколько значений:
  • none – отключает перенос слов в CSS ;
  • manual (значение по умолчанию ) – слова переносятся в тех участках текстового блока, где это задано с помощью тега или мягкого переноса (-) ;
  • auto – браузер автоматически переносит слова на основе своих настроек.

Для корректной работы свойства в теге или

Должен присутствовать атрибут lang со значением «ru» (lang="ru").

Свойство поддерживается последними версиями IE , Opera и Firefox . Для каждого из них прописывается своя строчка CSS . Hyphens не поддерживается Google Chrome . Пример:

метилпропенилендигидроксициннаменилакрилическая кислота

Запрет переноса слов

Иногда нужно сделать так, чтобы строка отображалась полностью без разрыва. Запрет переноса слов в css можно реализовать несколькими способами:

  • С помощью неразрывного пробела   , который устанавливается в местах переноса строки или слов;
  • Задав свойству white-space значение «nowrap » (white-space: nowrap ).

Пример реализации:

метилпропенилендигидроксициннаменилакрилическая кислота раз

метилпропенилендигидроксициннаменилакрилическая два

метилпропенилендигидроксициннаменилакрилическая кислота три

метилпропенилендигидроксициннаменилакрилическая кислота четыри

Теперь вы сможете переносить с помощью CSS даже самые длинные слова. Но вот с проблемой труднопереносимых людей вам придется разбираться самостоятельно. Попробуйте воздействовать на них методами CSS

Почему-то мне как-то особенно «везет» на странные, неожиданные фокусы с переносом текста.

Я написала электронную книгу, и решать, как переносить строки кода в блоках - это был кошмар! Порой блок текста из-за переноса выбивался по высоте из контейнера. А одни слишком длинные ссылки чего стоили!

Вставлять дефис в месте переноса или нет? Здесь переносим, там не переносим. Тут вставляем дефис, там нет. Одно свойство ни в какую не хочет работать без другого. И почему этот горизонтальный скроллинг упорно не хочет пропадать?

/me бьется об стол

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

Свойства

В конце концов при решении проблем с переносом текста остается некий типичный «список подозреваемых». Одни довольно очевидные и логичные, а другие - нет. Одни делают свое дело сами по себе, а другие не очень.

Итак, давайте взглянем.

word-wrap / overflow-wrap

Свойство word-wrap принимает в виде значений два ключевых слова: normal (по умолчанию) и break-word . Это в дополнение к трём глобальным значениям inherit , initial и unset .

По умолчанию слишком длинное слово не разрывается. Браузер не влияет на такое слово, что выглядит замечательно, пока мы не сталкиваемся с мобильными. Хотя размер контейнера может подстраиваться под слово, оно в итоге вывалится из его границ и приведёт к страшной горизонтальной прокрутке на всей странице.

В первом примере этого демо можно наглядно увидеть поведение по умолчанию:

Второй пример на этом демо включает объявление overflow-wrap: break-word; , приказывающее браузеру разбить слово перед возможным переполнением своего контейнера.

word-break

Насколько я поняла, свойство word-break нужно только для того, чтобы как-то по-особому форматировать текст на китайском, японском и корейском языках.

Я применяла word-break для разбивки длинных слов, но правильным свойством (если вы не работаете с дальневосточным текстом) будет более общее вышеупомянутое overflow-wrap .

hyphens

Свойство hyphens рассказывает браузеру, как расставлять дефис при переносе, и допускает следующие значения: none , manual и auto , которые в настоящий момент плохо поддерживаются браузерами , поэтому вам, видимо, придётся запустить FireFox.

Значение none гарантирует, что в слова никогда не будет подставляться символ переноса.

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

Жёсткий перенос (-) прикажет слову разорваться в определённом месте при необходимости, но всё в любом случае будет отображаться на экране.

Мягкий перенос (-) делает тоже самое, но фактически не отображает дефис на экране, что, как правило, предпочтительнее.

При значении auto слова можно разбивать либо в явно указанных местах, либо автоматически, в соответствии с правилами расстановки переносов для конкретного языка, указанными в специальных файлах (если они предусмотрены в браузере). Расстановка переносов специфична для языка, и для документа нужно определять атрибут lang .

white-space

У каждого из нас есть любимые CSS-свойства, на которые можно положиться, словно на запасной выход с надписью «При аварии разбить стекло молотком», чтобы выбраться из запутанной ситуации; см. также overflow: hidden и display: none . Для меня таким свойством является white-space .

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

У этого свойства бывает пять значений: normal (по умолчанию), nowrap , pre , pre-wrap и pre-line .

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

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

nowrap (пример 2) также игнорирует дополнительные пробелы, но зато не разбивает строку текста на границах контейнера.

pre учитывает все пробельные символы в разметке, и не разбивает строки (как видно выше в примере 3).

pre-wrap (пример 4) учитывает добавочные пробелы, но заставляет строку разбиваться.

pre-line (последний пятый пример) схлопывает пробельные символы (кроме перевода строки) и принуждает «цепочку» текста умещаться в контейнер.

На CSS — Tricks есть удобная табличка , которая поможет всё это резюмировать.

Строки кода в блоке

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

По моему опыту, обычно решение зависит от того, на каком языке этот код, и вообще от задачи, но эти проблемы можно обойти при помощи принудительных переносов (без дефиса!) или горизонтального скроллинга. Методом проб и ошибок можно понять, какое точное сочетание свойств нужно тому или иному браузеру. Убедитесь, что значение white-space случайно не переопределилось на одно из тех, при которых пробелы схлопываются, потому что это может оказаться значимым для синтаксиса кода.

Также я нарвалась на проблемы с адаптивностью при оформлении кода для github (gist), который особенно коварен из-за того, что это table. В таких случаях я понимаю, что мне придётся применить особенное оформление для переопределения контейнера таблицы.

Многоточие со смыслом

Как по мне, CSS-объявление text-overflow: ellipsis; - какая-то шляпа. Оно очень капризное и работает только при сочетании с группой других свойств. К тому же оно применяется только к единственной строке текста, что делает его не особо полезным.

С jQuery-плагином dotdotdot можно расставить многоточие в нескольких строках текста и даже добавить в конце ссылку для продолжения чтения.

Вот быстрый примерчик:

Перенос только в строго определенном месте

Порой необходимо, чтобы слова разрывались только в строго определённых местах, где в этом есть смысл, что добавляет ещё один уровень сложности; как же сообщить эти точки разрыва браузеру?

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

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

Эй, чем ты занимался на вы-ходных? Я рисовал по керамике, это выглядело натурально.

Слишком длинные ссылки

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

По умолчанию такие ссылки не разрываются и вызывают всяческие неприятности на небольших экранах. При необходимости URL’ы должны разрываться без дефиса, поскольку ссылка в таком случае будет нерабочей. Также здесь нужно быть осторожным, поскольку, если вы такое допустите, то разорвутся не только URL’ы, но и все слова.

Заключение (Ха!)

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

Определяют как переносить длинные слова:

  1. только там, где стоит чёрточка, пробел или Enter (искл., неразрывный пробел и неразрывный дефис ‑). Между частями одного слова пишется дефис (например, красно‐жёлтый), между словами — тире. "Мягкий дефис" - проявляется только при необходимости переноса. Если слово выходит за рамки родителя, то или ​ переносит его часть без чёрточки. В математических выражениях используется минус (например, 5 − 2). В номерах телефонов отображается цифровая чёрта (например, +7 800 000‒00‒00). И всё это не является той знакомой -, что есть на клавиатуре.
  2. после любого символа.
  3. согласно правилам русского языка с автоматическим применением дефиса.

overflow-wrap
word-wrap
word-break
line-break
hyphens

уже переосвидетельствовался наш тысячадевятьсотдевяностодевяти-килограммовый корчеватель‐бульдозер‐погрузчик

lang="ru" lang="ru" >уже переосвидетельствовался наш тысячадевятьсотдевяностодевяти- килограммовый корчеватель‐бульдозер‐погрузчик

В чём состоит различие одно свойства от другого

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

Для того, чтобы игнорировались черточки, сразу видимые глазу, вносим word-break: keep-all; .

Для того, чтобы браузер не обращал внимания и на мягкий дефис, вставляем hyphens: none; .

Если требуется перенос слов, то word-wrap: break-word; советую применять всегда, поскольку он понимается всеми браузерами. Он отличается от word-break: break-all; , которое является приоритетным, тем, что слова, которые не помещаются в блок, начинаются с новой строки и учитывается рекомендация мягкого дефиса.

При совместном использовании word-break: break-all; с hyphens: auto; , последнее игнорируется. hyphens: auto; расставляет любые дефисы по своему усмотрению. Но для того, чтобы оно работало, нужно обозначить свой язык, указав в div атрибут lang="ru" .

Не переносить слова на другую строку

Скажем, пункт меню или кнопка будут нехорошо выглядеть, если разъедутся на части. Поэтому надо запретить их разделение. Для чего все вышеуказанные свойства следует поставить в режим "по умолчанию" и добавить . Нажмите на и посмотрите на наш полигон.

Управлять переносом слов при hyphens: auto;

Тетрагидропиранилциклопентилтетрагидропиридопиридино вые

Тетрагидропиранилциклопентилтетрагидропиридопиридиновые

Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является элемент 

 , помещённый в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space
 имитирует работу 
Но в отличие от него не меняет шрифт на моноширинный.
Краткая информация
Обозначения

Описание
Пример


<тип>
Указывает тип значения.
<размер>


A && B
Значения должны выводиться в указанном порядке.
<размер> && <цвет>


A | B
Указывает, что надо выбрать только одно значение из предложенных (A или B).
normal | small-caps


A || B
Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.
width || count



Группирует значения.
[ crop || cross ]


*
Повторять ноль или больше раз.
[,<время>]*


+
Повторять один или больше раз.
<число>+


?
Указанный тип, слово или группа не является обязательным.
inset?


{A, B}
Повторять не менее A, но не более B раз.
<радиус>{1,4}


#
Повторять один или больше раз через запятую.
<время>#


×

Значения
normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление 

 переносит текст на новую строку. pre Текст показывается с учётом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. pre-line В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесён на следующую строку. 
Действие значений на текст представлено в табл. 1.
Пример


 
 
 white-space
 
 
 
 
Пример

 

 
 
 Великая теорема Ферма

 X n
 + Y n =
 Z n

 где n - целое число > 2
 
 
 

 


Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства white-space
Объектная модель
Объект
.style.whiteSpace
Примечание
Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line
 и pre-wrap
. Для