Перенос слов css: word-wrap | htmlbook.ru
word-wrap | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 10.5+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | normal |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам |
| Процентная запись | Неприменима |
| Ссылка на спецификацию | http://www.w3.org/TR/css3-text/#word-wrap |
Версии CSS
Описание
Свойство word-wrap указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область. Данное свойство носит черновой характер и при валидации документа на CSS3 выдает ошибку.
Синтаксис
word-wrap: normal | break-word | inherit
Значения
- normal
- Строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью тега <br>).
- break-word
- Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока.
- inherit
- Наследует значение родителя.
Пример
HTML5CSS2.1CSS3IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>word-wrap</title> <style> .col { background: #f0f0f0; /* Цвет фона */ width: 230px; /* Ширина блока */ padding: 10px; /* Поля */ font-size: 1.5em; /* Размер шрифта */ word-wrap: break-word; /* Перенос слов */ } </style> </head> <body> <div> <p>Cуществительное</p> <p>высокопревосходительство</p> <p>Одушевленное существительное</p> <p>одиннадцатиклассница</p> <p>Химическое вещество</p> <p>метоксихлордиэтиламинометилбутиламиноакридин</p> </div> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Перенос длинных слов
Перенос слов CSS (свойства overflow-wrap, word-wrap, word-break, hyphens) — Примеры
Указанные ниже свойства CSS определяют как переносить длинные слова:
- только там, где стоит чёрточка, пробел или Enter (искл., неразрывный пробел
и неразрывный дефис‑). Между частями одного слова пишется дефис (например, красно‐жёлтый), между словами — тире. «Мягкий дефис»­проявляется только при необходимости переноса. Если слово выходит за рамки родителя, то<wbr>или​ - после любого символа.
- согласно правилам русского языка с автоматическим применением дефиса.
В чём состоит различие одно свойства от другого
По умолчанию длинные слова не переносятся, если на то нет явных указаний с помощью дефиса, и начинаются с новой строки.
Для того, чтобы игнорировались черточки, сразу видимые глазу, вносим 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".
Не переносить слова на другую строку
Скажем, пункт меню или кнопка будут нехорошо выглядеть, если разъедутся на части. Поэтому надо запретить их разделение. Для чего все вышеуказанные свойства следует поставить в режим «по умолчанию» и добавить white-space: pre; или white-space: nowrap;. Нажмите на white-space: nowrap; и посмотрите на наш полигон.
Управлять переносом слов при hyphens: auto;
Тетрагидропиранилциклопентилтетрагидропиридопиридиновые
<div lang="ru">Тетрагидропиранилциклопентилтетрагидропиридо<span>пиридино</span>вые</div>
<style>
.hyphens {
-webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; /* пока поддерживает только Firefox */
text-align: justify;
}
.nohyphens {
white-space: nowrap;
}
</style>Где всё сложно с переносами строк. Вот все CSS- и HTML-хитрости для этого — CSS-LIVE
Перевод статьи Where Lines Break is Complicated. Here’s all the Related CSS and HTML. с сайта css-tricks.com для CSS-live.ru, автор — Крис Койер
Скажем, есть действительно длинное слово в каком-то тексте, у контейнера которого недостаточно ширины для него. Типичная причина этого — длинный URL, просочившийся в текст. Что происходит? Зависит от CSS. Как этот CSS управляет раскладкой и как он этим текстом распоряжается.
Вот как может выглядеть ситуация с не поместившимся текстом:
Текст, вылезающий из бокса — визуальная проблема.
Первое решение — overflow: hidden;, как этакий «лобовой» прием, чтобы не дать тексту (и чему угодно) высовываться. Но от этого пострадает доступность текста. В некоторых десктопных браузерах для выделения текста можно три раза кликнуть на нем мышью, но не каждый может об этом знать и не всегда такое возможно.
Название свойства «overflow» — «переполнение» — здесь весьма к месту, ведь именно оно, переполнение, у нас и происходит. Ещё есть overflow: auto;, приводящее к горизонтальному скроллу. Иногда может и подойди, но наверняка вы тоже согласитесь, что обычно это решение неприемлемо.
Нам нужно, чтобы этот зараза длинный URL (или любой текст) разорвался, чтобы перенестись на следующую строку. Варианты есть! Для начала подготовим место, где мы будем со всем этим разбираться.
Экспериментальная площадка
Здесь я взял блок с содержимым, размер которого можно менять, и решил соединить его с разными CSS-свойствами и их значениями, которые можно включать/выключать, чтобы увидеть, как это влияет на содержимое.
Уверен, что этот список неполный и не идеальный. Это лишь некоторые из знакомых мне свойств.
See the Pen Figuring Out Line Wrapping by Максим (@psywalker) on CodePen.
Кувалда: word-break: break-all;
Позволяет словам разрываться везде. Свойство word-break «решает» проблему:
p {
word-break: break-all;
}
В переписке по электронной почте fantasai пояснила, что это работает, поскольку свойство word-break меняет определение того, что считать словом. Значение break-all по сути воспринимает любой текст как восточноазиатский, который может переноситься практически где угодно (кроме точек в конце предложений и закрывающих скобок). Значение keep-all, наоборот, воспринимает восточноазиатские иероглифы как буквы в слове, а не как целые слова.
Прицельное решение:
overflow-wrap: break-word;Свойство overflow-wrap кажется наиболее эффективным решением для данной проблемы.
p {
word-wrap: break-word; /* old name */
overflow-wrap: break-word;
}
На первый взгляд это может походить на демо с word-break: break-all; выше, но заметьте, как в URL оно не разрывает «pen» как «pe\n», а делает перенос в конце этого слова, рядом со слешем.
fantasai объясняет:
Если слово не может разорваться, переполняя контейнер, оно может разорваться где угодно во избежание переполнения.
Решение потяжелее, иногда:
hyphens: auto;Свойство hyphens может иногда решить проблему с URL-адресами и длинными словами, но это не точно. На длинном числе, например, он споткнется. Вдобавок, hyphens влияет на весь текст, позволяя себе вольности в разрывах ради того, чтобы сделать правый край текста более ровным.
p {
hyphens: auto;
}
fantasai сказала мне:
Если «слово» находится в конце строки, его можно переносить через дефис.
Думаю, это «слово» в кавычках дает подсказку, в чем тут проблема. Некоторые неприемлемо длинные строки — не «слова», поэтому это решение — не панацея.
Будущая кувалда:
line-break: anywhere;Есть свойство line-break. В основном, кажется оно для пунктуации, но ни в одном браузере оно у меня не заработало. fantasai сказала мне, что появится новое значение anywhere, которое:
«как
word-break: break-all;» за исключением того, что она на самом деле разрываетвсё, как примитивная программа на терминале.
Другие решения в HTML
Элемент <br> разобъёт строку где угодно, если только у него не будет display:none.
Элемент <wbr> — «возможный разрыв слова», что означает, что длинному слову, обычно вызывающему раздражающую проблему с переполнением можно сказать, чтобы оно разорвалось в конкретном месте. Полезно! Оно ведёт себя, как пробел нулевой ширины.
Другие решения на CSS
Символ ­ делает то же самое, что и элемент <wbr> (На самом деле не совсем, поскольку, в отличие от <wbr>, добавляет дефисы при переносе. — прим. перев.)
::before { content: "\A"; }, если только элемент не строчный (в противном случае потребуется white-space: pre;)P.S. Это тоже может быть интересно:
Укрощаем длинный текст средствами HTML и CSS — Блог
Перенос длинных слов
Проблема переноса длинных слов встречается не так редко, как может показаться. Если не брать во внимание слова-рекордсмены вроде “метилпропенилендигидроксициннаменилакрилической кислоты”, порой в установленные макетом страницы рамки не умещаются менее экзотические слова.
Браузеры по умолчанию не разбивают длинные слова на несколько строк. Перенос на новую строку происходит только там, где стоит дефис, пробел или Enter (исключение составляют неразрывный пробел и неразрывный дефис ‑). При некоторых условиях может появиться ползунок горизонтальной прокрутки, но чаще всего слово выйдёт за границы отведённого ему блока.
Немного иначе ведут себя flexbox элементы и таблицы, они игнорируют установленную ширину и всегда растягиваются настолько, чтобы вместить текст целиком. В примере ниже flex-контейнеру было задано ограничение по ширине (width: 300px;), однако видно, что в зависимости от контента блок может занимать больше места. Не самая приятная особенность для верстальщика, уверенного, что в его макете всё рассчитано до пикселя.
Перенос слов средствами HTML
Как говорилось выше, по умолчанию браузер не переносит слова на несколько строк. Отчасти потому, что он может не знать, как это сделать грамотно.
Указать браузеру, в каких местах слово может быть разбито переносом можно с помощью символа мягкого разрыва (­). Переносы будут добавлены только там и тогда, когда это необходимо, чтобы слово поместилось в контейнер.
В HTML5 появился тег <wbr/>, обладающий схожим эффектом, однако он не добавляет символ переноса в месте разрыва слова, что выглядит уже не так красиво.
<html>
<head>
<style>
.card {
width: 200px;
height: 250px;
background: #7cd4ae;
padding: 10px;
display: inline-block;
margin: 2em;
}
</style>
</head>
<body>
<div>
<img src="troll.jpg">
Двухсот­восьмидесяти­восьми­киллограммовый тролль
</div>
<div>
<img src="troll.jpg">
Двухсот<wbr/>восьмидесяти<wbr/>восьми<wbr/>киллограммовый тролль
</div>
</body>
</html>
Перенос слов средствами CSS
В CSS есть несколько свойств, влияющих на перенос текста.
- overflow-wrap (word-wrap) — управляет переносом длинных слов (normal — не переносить, если перенос не задан явно, break-word — принудительно переносить).
- word-break — управляет переносом длинных слов (normal — не переносить, если перенос не задан явно, break-all — принудительно переносить, keep-all — не переносить, даже если слово содержит дефис).
- hyphens — автоматический перенос слов, основанный на встроенном в браузер словаре переносов (none — не переносить, auto — переносить длинные слова).
Название word-wrap является устаревшим, но сохраняется для совместимости со старыми версиями браузеров.
Свойства word-wrap и word-break на первый взгляд делают одно и то же, но есть небольшие отличия. Word-wrap считается более общим, тогда как word-break предусматривает специальное поведение для китайского, японского и корейского языков. Word-wrap начинает не поместившееся слово с новой строки, а word-break нет. Однако word-break является более приоритетным по отношению к word-wrap.
Свойство hyphens является наиболее мощным и удобным, но его поддержка браузерами пока не идеальна. Плюс оно требует обязательного указания языка в атрибуте lang тега (например, lang=»ru»).
<html>
<head>
<style>
.description {
width: 100px;
background: #7cd4ae;
word-wrap: break-word;
word-break: break-all; /* более приоритетно */
}
</style>
</head>
<body>
<div lang="ru">
Верховный суд Лос-Анджелеса решит судьбу огромнейшего трёхсотвосьмидесятикилограммового изумруда
</div>
</body>
</html>
<h3>Перенос длинных слов</h3> <p>Проблема переноса длинных слов встречается не так редко, как может показаться. Если не брать во внимание слова-рекордсмены вроде “метилпропенилендигидроксициннаменилакрилической кислоты”, порой в установленные макетом страницы рамки не умещаются менее экзотические слова.</p> <p>Браузеры по умолчанию не разбивают длинные слова на несколько строк. Перенос на новую строку происходит только там, где стоит дефис, пробел или Enter (исключение составляют неразрывный пробел &nbsp; и неразрывный дефис &#8209;). При некоторых условиях может появиться ползунок горизонтальной прокрутки, но чаще всего слово выйдёт за границы отведённого ему блока.</p> <p><img alt=»» src=»/documents/10136/1129663/Article+18+-+1.png/78167a41-190d-4fa6-ad42-94edb58ce6df?t=1546978623888″ /></p> <p>Немного иначе ведут себя flexbox элементы и таблицы, они игнорируют установленную ширину и всегда растягиваются настолько, чтобы вместить текст целиком. В примере ниже flex-контейнеру было задано ограничение по ширине (width: 300px;), однако видно, что в зависимости от контента блок может занимать больше места. Не самая приятная особенность для верстальщика, уверенного, что в его макете всё рассчитано до пикселя.</p> <p><img alt=»» src=»/documents/10136/1129663/Article+18+-+2.png/00d36fc9-bfa7-45e8-ad39-2ab9012e3abc?t=1546978630901″ /></p> <h4>Перенос слов средствами HTML</h4> <p>Как говорилось выше, по умолчанию браузер не переносит слова на несколько строк. Отчасти потому, что он может не знать, как это сделать грамотно.</p> <p>Указать браузеру, в каких местах слово может быть разбито переносом можно с помощью <strong>символа мягкого разрыва</strong> (<code>&shy;</code>). Переносы будут добавлены только там и тогда, когда это необходимо, чтобы слово поместилось в контейнер.</p> <p>В HTML5 появился тег <strong><wbr/></strong>, обладающий схожим эффектом, однако он не добавляет символ переноса в месте разрыва слова, что выглядит уже не так красиво.</p> <pre> <html> <head> <style> .card { width: 200px; height: 250px; background: #7cd4ae; padding: 10px; display: inline-block; margin: 2em; } </style> </head> <body> <div> <img src=»troll.jpg»> Двухсот&shy;восьмидесяти&shy;восьми&shy;киллограммовый тролль </div> <div> <img src=»troll.jpg»> Двухсот<wbr/>восьмидесяти<wbr/>восьми<wbr/>киллограммовый тролль </div> </body> </html></pre> <p> </p> <p><img alt=»» src=»/documents/10136/1129663/Article+18+-+3.png/04451e1d-9f02-48c5-8f66-b18ac5d042e8?t=1546979243873″ /></p> <p> </p> <h4>Перенос слов средствами CSS</h4> <p>В CSS есть несколько свойств, влияющих на перенос текста.</p> <ul> <li>overflow-wrap (word-wrap) — управляет переносом длинных слов (normal — не переносить, если перенос не задан явно, break-word — принудительно переносить).</li> <li>word-break — управляет переносом длинных слов (normal — не переносить, если перенос не задан явно, break-all — принудительно переносить, keep-all — не переносить, даже если слово содержит дефис).</li> <li>hyphens — автоматический перенос слов, основанный на встроенном в браузер словаре переносов (none — не переносить, auto — переносить длинные слова).</li> </ul> <p>Название word-wrap является устаревшим, но сохраняется для совместимости со старыми версиями браузеров.</p> <p>Свойства word-wrap и word-break на первый взгляд делают одно и то же, но есть небольшие отличия. Word-wrap считается более общим, тогда как word-break предусматривает специальное поведение для китайского, японского и корейского языков. Word-wrap начинает не поместившееся слово с новой строки, а word-break нет. Однако word-break является более приоритетным по отношению к word-wrap.</p> <p>Свойство hyphens является наиболее мощным и удобным, но его поддержка браузерами пока не идеальна. Плюс оно требует обязательного указания языка в атрибуте lang тега (например, lang=»ru»).</p> <pre> <html> <head> <style> .description { width: 100px; background: #7cd4ae; word-wrap: break-word; word-break: break-all; /* более приоритетно */ } </style> </head> <body> <div lang=»ru»> Верховный суд Лос-Анджелеса решит судьбу огромнейшего трёхсотвосьмидесятикилограммового изумруда </div> </body> </html></pre> <p> </p> <p><img alt=»» src=»/documents/10136/1129663/Article+18+-+4.png/eeaafee6-6067-4be4-92db-fd8c5b910a93?t=1546979251721″ /></p> <div><textarea name=»blogs-entry-content-2103008_original»></textarea></div> <script type=»text/javascript»>CKEDITOR.disableAutoInline=true;CKEDITOR.env.isCompatible=true;</script>
Проблемы с переносом слов | CSS
Я написал электронную книгу, и это был сущий кошмар, когда мне приходилось сталкиваться с CSS переносом текста внутри блоков кода. Иногда высота блока текста выше, чем контейнера. Иногда проблемы возникали из-за длинных URL-адресов:
В этой статье мы рассмотрим стандартные свойства, используемые для решения таких проблем, и приведем несколько сценариев, которые иллюстрируют особенно сложные случаи переноса текста.
Когда речь заходит о решении проблем переноса текста с помощью CSS, мы уже не можем говорить о «стандартных вариантах«. Некоторые случаи решаются довольно просто и логично, в то время как другие вовсе нет. Одни свойства просто работают без дополнительной доработки, а другие требуют боле тщательной настройки.
Давайте бегло рассмотрим основные свойства.
word-wrap/overflow-wrap
Свойство word-wrap принимает два значения: normal (по умолчанию) и break-word. Это не считая трех глобальных значений: inherit, initial и unset.
По умолчанию особенно длинное слово не будет разрываться. При CSS переносе текста на новую строку браузер сохраняет это поведение, пока дело не доходит до просмотра текста на смартфоне. Контейнер слова может быть адаптивным, а само слово будет вываливаться за его границы, что приведет к появлению горизонтальной прокрутки по ширине страницы.
В первом примере показано поведение по умолчанию для таких случаев:
Посмотреть демо-версию
Второй пример этой демо-версии иллюстрирует действие свойства overflow-wrap: break-word, которое указывает браузеру разрывать слово, когда оно выходит за пределы контейнера.
Важно отметить: в текущей версии спецификации по текстам CSS3 свойство word-wrap было заменено на overflow-wrap, которое принимает те же значения. Здесь вы найдете обзор поддержки браузерами этого нового свойства.
word-break
Свойство word-break предназначено только для требующих определенного поведения языков (китайского, японского и корейского).
Я обычно использовал его для CSS переноса длинных слов, но, если речь не идет о не выше перечисленных языках, то лучше использовать свойство overflow-wrap, о котором я только что рассказал.
hyphens
Свойство hyphens указывает браузеру, как обрабатывать переносы слов с добавлением дефисов. Оно принимает следующие значения: none, manual и auto. Это свойство на данный момент поддерживается браузерами не полностью, поэтому будет работать нормально только в Firefox.
Значение none задает поведение, при котором дефисы никогда не будут добавляться в слова при разрыве строк.
При использовании значениия manual слова будут разрываться при разрыве строк только на символах, которые указывают это. В разметку добавляются специальные теги, на которых при необходимости переносятся слова.
Тег — задает жесткий перенос — он указывает разрывать слово в этом месте, если это необходимо, но сам дефис отображается на экране, независимо от того, переносится слово или нет.
Тег ­ задает мягкий CSS перенос текста на новую строку – он указывает разрыв слова, если это необходимо, но дефис на экране отображается только, если слово переносится.
Значение auto указывает, что слова могут разрываться в определенных местах или автоматически согласно разрешениям, указанным в ресурсах для конкретных языков (если они предоставляются браузером). В этом случае переносы будут зависеть от конкретного языка, и для документа должен быть указан атрибут lang.
white-space
Я предпочитаю использовать свойство white-space. Оно определяет, как пробелы, отступы табуляции, принудительные разрывы строк обрабатывается внутри элемента. Оно может оказаться чрезвычайно полезным для устранения неполадок и получение большего контроля над содержимым ячейки таблицы.
Свойство принимает пять значений: normal (по умолчанию), nowrap, pre, pre-wrap и pre-line.
Приведенная ниже демо-версия иллюстрирует все эти значения в действии; учитывайте дополнительные промежутки, включенные в разметку.
Посмотреть демо-версию
При CSS переносе текста в блоке по умолчанию пустые пространства объединяются и строки разрываются, чтобы соответствовать размерам контейнера. Это показано в первом примере, где в текст добавлены дополнительные пробелы, но при отображении они не выводятся.
Значение nowrap (пример 2) также не воспринимает дополнительные пробелы, но в отличие от normal строки текста не переносятся в соответствии с размерами контейнера.
pre поддерживает дополнительное пробелы в разметке и не разрывает строки при выходе за пределы контейнера, как показано в примере 3.
Пример 4, pre-wrap не объединяет пустые пространства, но переносит строки при выходе за пределы контейнера.
Значение pre-line объединяет пробелы (за исключением символов перехода на новую строку) и разрывают текст, чтобы он соответствовал границам контейнера, как показано в последнем примере.
По умолчанию блоки кода оборачиваются в теги pre и не переносятся. Это может привести к большой путанице.
По личному опыту могу сказать, что решение этой проблемы зависит от конкретного языка. И она может быть решена с помощью принудительных CSS переносов текстов по словам (без дефисов) или горизонтальной прокрутки.
Убедитесь, что все установленные значения white-space не приводят к объединению пустых пространств и пробелов, иначе это нарушит синтаксис кода.
Я также столкнулся со сложностями, связанными с адаптацией кода при структурировании верстки из-за использования таблиц. В таких случаях я применяю специальный стиль для контейнера таблицы, чтобы переопределить его поведение.
CSS text-overflow: ellipsis является неудобным. Оно требует добавления большого количества кода, так как работает только в сочетании с кучей других свойств. Кроме этого, оно действует только на одну строку текста, что делает его еще более неудобным.
Есть JQuery-плагин, dotdotdot, который создает многоточие. С его помощью можно добавить даже ссылку в конце для продолжения чтения.
Вот пример его применения:
Посмотреть пример
Иногда нужно, чтобы слова разрывались, но только в очень специфических местах. Это делает все еще сложнее. Как нам сообщить браузеру, что в этих местах нужно добавлять CSS перенос текста?
Это достигается за счет использования мягкого или твердого переноса с помощью дефисов, который мы рассматривали ранее. При необходимости строка будет разрываться в местах, где добавлены теги ­:
Hey what did you do this we­ekend? I painted some pottery, it was p neat.
Когда я готовил к выходу свою электронную книгу, мне неоднократно приходилось сталкиваться с проблемой слишком длинных ссылок.
По умолчанию они не разрываются, и это приводит к некорректному отображению на небольших экранах. URL-адрес нужно разрывать, когда это необходимо, но без дефисов, чтобы ссылка осталась рабочей. Также нужно быть очень осторожным при применении CSS переносов. Если вы сделаете что-то неправильно, разрываться будут не только URL-адреса, но и любые слова.
Применив overflow-wrap: break-word к ссылке, вы зададите разрыв URL-адреса при ее выходе за пределы контейнера, хотя это свойство поддерживается не во всех браузерах.
Задать правильное сочетание свойств для решения проблемы переноса может оказаться непростой задачей. Но попрактиковавшись и проанализировав свои ошибки, вы сможете найти верное решение:
Пожалуйста, оставляйте ваши мнения по текущей теме материала. Мы очень благодарим вас за ваши комментарии, дизлайки, подписки, лайки, отклики!
Данная публикация является переводом статьи «Word Wrapping Woes» , подготовленная редакцией проекта.
CSS перенос слов
Всем привет и приступим. Допустим у нас есть следующий текст:
<p>
Правительство Объединенных Арабских Эмиратов и администрация концентрируют в этом
городе все самые новые технологии, основанные на последних достижениях науки и техники,
пытаясь превратить его город будущего, словно сошедший с экрана какого-нибудь
научно-фантастического фильма. К этим технологиям можно отнести роботов-полицейских,
автомобили-роботы и транспортную систему Hyperloop, а в недалеком будущем в Дубайе
начнет функционировать служба автоматических летающих такси. И в рамках подготовки к
этому событию электрический двухместный летательный аппарат Volocopter с 18 роторами,
который и будет использоваться в качестве такси, совершил первый полет в автоматическом
режиме, пишут...
</p>здесь у нас указан некий текст с которым мы сейчас начнем работать.
И первое свойство которое мы с вами рассмотрим называется word-break
word-break: normal | keep-all | break-all
Нас в основном интересуют два значения данного свойства normal — дефолтное значение и break-all с помощью которого мы устанавливаем что перенос слов осуществляется посимвольно. Что касается keep-all, то данное значение служит для переноса слов на китайском, японском и корейском языках.
p{
word-break: break-all;.
}заметьте, что после применения данного стиля весь наш текст растягивается в полную доступную ширину и переносы осуществляются не по словам, а по символам. Это свойство может быть полезно когда у нас есть очень длинное слово которое не влезает в заданную ширину. Однако это создает своего рода неудобства, так как посимвольно переносятся абсолютно все слова даже те которые влезают в заданную ширину.
К счастью есть аналогичное свойство которое переносит только не влезающие слова по символам. Называется оно overflow-wrap:
p{
overflow-wrap: break-word;
}и после применения значения break-word, весь наш текст переносится по словам, а слова которые не влезают в заданную ширину переносятся посимвольно. Можно сказать задача выполнена! Помимо значения break-word данное свойство принимает:
overflow-wrap: normal | break-word | inherit;
Теперь давайте перейдем к более продвинутому свойству css для переноса слов в тексте.
Рассмотрим свойство white-space c помощью которого мы можем имитировать работу тега pre не меняя сам текст на моноширный.
white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit
По сути с помощью данного свойства мы работает только с пробелами в тексте. К примеру если мы применим следующий стиль к нашему тексту:
white-space: nowrap;все переносы строк у нас будут проигнорированы и наш текст отобразиться в виде одной строки.
white-space: pre;В случае значения pre все переносы строк будут аналогичны переносам в исходном коде. Причем если текст не будет помещаться в заданную ширину, то он переносится не будет. Если мы хотим чтобы он переносился, то нам нужно указать значение pre-line.
Если же мы хотим чтобы у нас учитывались не только переносы строк исходного кода, но и пробелы между словами, тогда нужно указать:
white-space: pre-wrap;Вот в принципе и все что я хотел вам рассказать про переносы слов средствами css. Надеюсь данная статья была для вас полезна и вы не раз еще воспользуетесь полученными знаниями.
Ну а я же с вами прощаюсь. Желаю успехов и удачи! Пока!
Внимание!!! Комментарий теперь перед публикацией проходит модерацию
Перенос слов в CSS
Каскадные стили позволяют управлять переносом слов в выбранном контейнере. Для этих целей служат два свойства — word-wrap и word-break. Работу с ними и небольшие хитрости рассмотрим в данной статье.
Разбивка и перенос длинных слов.
Допустим, в нашем ограниченном по ширине контейнере, необходимо учесть такую коллизию как длинный текст.
[пример 1]
На картинке мы видим, что текст вылазит за границу контейнера (элемента DIV). Для него написаны следующие свойства:
div { width: 150px; height: 100px; padding: 10px; background-color: #00f000; }
div { width: 150px; height: 100px; padding: 10px; background-color: #00f000; } |
Если мы применим к нему дополнительно стиль
то информация, выходящая за границы будет просто обрезана. А нам нужен перенос.
Для указания, что в данном случае нам нужен перенос, воспользуемся word-wrap. По-умолчанию, значение этого свойства — normal, это соответствует случаю в примере 1. Давайте установим для него следующие значение:
div { … word-wrap: break-word; }
div { … word-wrap: break-word; } |
[пример 2]
Так мы достигаем желаемого результата — переноса длинного слова. Перенос выполняется с учетом внутренних отступов (padding).
Перенос слов не по границе слов.
Если бы мы наш пример разбавили пробелами, то задавать значение word-wrap не пришлось бы, т.к. браузер автоматически выполняет нужные переносы. То есть вот так:
[пример 3]
То как происходит разбивка управляется свойством CSS word-break. В примере 3 его значение установлено по умолчанию, оно соответствует вот такой установке:
div { … word-break: keep-all; /* или normal */ }
div { … word-break: keep-all; /* или normal */ } |
Т.е. разбивка текста производится на границе слов. Но мы можем заставить браузер разбивать фразу в любом месте предложения:
div { … word-break: break-all; }
div { … word-break: break-all; } |
[пример 4]
Благодаря такой разбивке предложение испытало перенос посреди слова «Constant».
Специальные «непереносимые» пробелы.
Возникают ситуации, когда нужно запретить перенос слов, но и пробелы между словами оставить.
Для этого случая в HTML существует спец символ — Non-breakable-SPace — « ». Если в третьем примере мы заменим все пробелы данным символом, то получим похожую на пример № 1 картинку:
[пример 5]
HTML код последнего примера:
<div > very Long Word Or Constant<br /> 3.14159 26535 89793 23846 26433 83279 50288 41971 </div>
<div > very Long Word Or Constant<br /> 3.14159 26535 89793 23846 26433 83279 50288 41971 </div> |
overflow-wrap — CSS: каскадные таблицы стилей
Свойство overflow-wrap CSS применяется к встроенным элементам, устанавливая, должен ли браузер вставлять разрывы строк в строку, которая в противном случае не может быть разбита, для предотвращения выхода текста за пределы поля строки.
Примечание: В отличие от word-break , overflow-wrap создаст разрыв только в том случае, если целое слово не может быть помещено в отдельную строку без переполнения.
Свойство изначально было нестандартным расширением Microsoft без префикса под названием word-wrap и было реализовано в большинстве браузеров с таким же именем.С тех пор он был переименован в overflow-wrap , где word-wrap является псевдонимом.
переполнение-обертка: нормальная;
переполнение-обертка: слово-прерывание;
переполнение-обертка: где угодно;
переполнение-обертка: наследование;
переполнение-обертка: начальная;
переполнение-обертка: вернуться;
переполнение-обертка: не установлено;
Свойство overflow-wrap указано как одно ключевое слово, выбранное из списка значений ниже.
Значения
-
нормальный - Строки могут разрываться только в обычных точках разрыва слова (например, в пробелах между двумя словами).
-
где угодно - Чтобы предотвратить переполнение, неразрывная строка символов, такая как длинное слово или URL-адрес, может быть разорвана в любой момент, если в строке нет приемлемых точек разрыва. В точку разрыва не вставляется символ переноса. Возможности мягкого переноса, представленные разрывом слова, учитываются при вычислении внутренних размеров минимального содержимого.
-
разрывное слово - То же, что и
в любом месте, с обычными неразрывными словами, которые могут быть разбиты в произвольных точках, если нет других приемлемых точек останова в строке, но возможности мягкого переноса, вводимые разрывом слова, НЕ учитываются при вычислении минимального содержимого внутренние размеры.
нормальный | слово-разрыв | в любом месте
Сравнение переноса переполнения, переноса слова и дефисов
В этом примере сравниваются результаты переноса переполнения , переноса слова и переносов при разбиении длинного слова.
HTML
Говорят, рыбалка отличная на
Озеро Chargoggagoggmanchauggagoggchaubunagungamaugg ,
хотя сам я там никогда не был. ( нормальный )
Говорят, на рыбалке отлично
Озеро Chargoggagoggmanchauggagoggchaubunagungamaugg ,
хотя сам я там никогда не был.( overflow-wrap: где угодно )
Говорят, на рыбалке отлично
Озеро Chargoggagoggmanchauggagoggchaubunagungamaugg ,
хотя сам я там никогда не был. ( overflow-wrap: break-word )
Говорят, на рыбалке отлично
Озеро Chargoggagoggmanchauggagoggchaubunagungamaugg ,
хотя сам я там никогда не был. ( разрыв слова )
Говорят, на рыбалке отлично
Озеро Chargoggagoggmanchauggagoggchaubunagungamaugg ,
хотя сам я там никогда не был.( дефисы , без атрибута lang )
Говорят, на рыбалке отлично
Озеро Chargoggagoggmanchauggagoggchaubunagungamaugg ,
хотя сам я там никогда не был. ( дефисы , правила английского языка)
Говорят, на рыбалке отлично
Озеро Chargoggagoggmanchauggagoggchaubunagungamaugg ,
хотя сам я там никогда не был. ( дефисы , правила Германии)
CSS
п {
ширина: 13em;
маржа: 2 пикселя;
фон: золото;
}
.ow -where {
переполнение-обертка: где угодно;
}
.ow-break-word {
переполнение-обертка: слово-прерывание;
}
.word-break {
слово-разрыв: сломать все;
}
.hyphens {
дефисы: авто;
}
Результат
Таблицы BCD загружаются только в браузере
Перенос и разрыв текста — CSS: каскадные таблицы стилей
В этом руководстве объясняются различные способы управления переполненным текстом в CSS.
В CSS, если у вас есть неразрывная строка, такая как очень длинное слово, по умолчанию она переполняет любой контейнер, который слишком мал для него во внутреннем направлении.Мы можем видеть это в примере ниже: длинное слово выходит за пределы рамки, в которой оно содержится.
CSS будет отображать переполнение таким образом, потому что выполнение других действий может привести к потере данных. В CSS потеря данных означает, что часть вашего контента исчезает. Таким образом, начальное значение overflow — это , видимое , и мы можем видеть переполненный текст. Как правило, лучше видеть переполнение, даже если оно грязное. Если что-то исчезнет или будет обрезано, как если бы переполнение было установлено на скрыто , вы могли бы не заметить его при предварительном просмотре вашего сайта.Беспорядочное переполнение по крайней мере легко обнаружить, а в худшем случае ваш посетитель сможет увидеть и прочитать контент, даже если он выглядит немного странно.
В следующем примере вы можете увидеть, что произойдет, если переполнение установлено на скрыто .
Чтобы найти минимальный размер блока, который будет содержать его содержимое без переполнения, установите для свойства width или inline-size значение min-content .
Использование min-content , таким образом, является одной из возможностей переполнения ящиков.Если можно позволить коробке увеличиваться до минимального размера, необходимого для содержимого, но не больше, использование этого ключевого слова даст вам такой размер.
Если поле должно быть фиксированного размера или вы хотите, чтобы длинные слова не переполнялись, то свойство overflow-wrap может помочь. Это свойство разбивает слово, если оно слишком длинное, чтобы поместиться в отдельной строке.
Примечание: Свойство overflow-wrap действует так же, как нестандартное свойство word-wrap .Свойство переноса слов теперь обрабатывается браузерами как псевдоним стандартного свойства.
Можно попробовать альтернативное свойство разрыв слова . Это свойство прерывает слово в точке его переполнения. Это вызовет разрыв, даже если размещение слова на новой строке позволит отображать его без разрывов.
В следующем примере вы можете сравнить разницу между двумя свойствами в одной строке текста.
Это может быть полезно, если вы хотите предотвратить появление большого промежутка, если для строки достаточно места.Или, если есть еще один элемент, после которого вы не хотели бы, чтобы разрыв произошел сразу же.
В приведенном ниже примере есть флажок и метка. Допустим, вы хотите, чтобы этикетка порвалась, если она окажется слишком длинной для коробки. Однако вы не хотите, чтобы он ломался сразу после флажка.
Чтобы добавить дефисы при разрыве слов, используйте свойство CSS hyphens . Используя значение auto , браузер может автоматически разбивать слова в соответствующих точках переноса, следуя любым правилам, которые он выбирает.Чтобы иметь некоторый контроль над процессом, используйте значение manual , затем вставьте в строку символ жесткого или мягкого разрыва. Жесткий разрыв (–) всегда ломается, даже если в этом нет необходимости. Мягкий разрыв ( ) прерывается только в том случае, если разрыв необходим.
Если вы знаете, где вы хотите разорвать длинную строку, то также можно вставить элемент HTML . Это может быть полезно в таких случаях, как отображение длинного URL-адреса на странице.Затем вы можете добавить свойство, чтобы разбить строку в нужных местах, чтобы ее было легче читать.
В приведенном ниже примере текст разрывается в месте расположения .
перелива-пленка | CSS-уловки
Свойство overflow-wrap в CSS позволяет указать, что браузер может разбивать строку текста внутри целевого элемента на несколько строк в другом неразрывном месте. Это помогает избежать необычно длинной строки текста, вызывающей проблемы с разметкой из-за переполнения.
.example {
переполнение-обертка: слово-прерывание;
} Значения
-
нормальный: по умолчанию. Браузер разбивает строки в соответствии с обычными правилами переноса строк. Слова или непрерывные строки не разорвутся, даже если они переполнят контейнер. -
break-word: слова или строки символов, которые слишком велики, чтобы поместиться в их контейнер, будут разорваны в произвольном месте, чтобы вызвать разрыв строки. Символ дефиса не будет вставлен, даже если используется свойстводефисов. -
наследовать: целевой элемент должен наследовать значение свойстваoverflow-wrap, определенного для его непосредственного родителя.
В приведенной ниже демонстрации есть кнопка переключения, которая позволяет переключаться между нормальным и контрольным словом .
См. Демонстрацию переноса пером / переноса слов Луи Лазариса (@impressivewebs) на CodePen.
Чтобы продемонстрировать проблему, которую пытается решить overflow-wrap , в демонстрации используется необычно длинное слово внутри относительно небольшого контейнера.Когда вы включаете break-word , слово разбивается на небольшой объем доступного пространства, как если бы слово было несколькими словами.
Строка неразрывных пробелов ( & nbsp; ) будет обрабатываться таким же образом и также будет разорвана в подходящем месте.
overflow-wrap полезен при применении к элементам, которые содержат немодерируемый пользовательский контент (например, разделы комментариев). Это может предотвратить длинные URL-адреса и другие непрерывные строки текста (например,г. вандализм) от нарушения макета веб-страницы.
Сходства с разрывом слова
Свойство overflow-wrap и word-break ведут себя очень похоже и могут использоваться для решения схожих проблем. Краткое изложение разницы, как объясняется в спецификации CSS:
-
overflow-wrapобычно используется, чтобы избежать проблем с длинными строками, вызывающими нарушение макета из-за вывода текста за пределы контейнера. -
разрыв словаопределяет возможность мягкого переноса между буквами, обычно связанными с такими языками, как китайский, японский и корейский (CJK).
После описания примеров того, как word-break может использоваться в контенте CJK, в спецификации говорится: «Чтобы включить дополнительные возможности прерывания только в случае переполнения, см. overflow-wrap ».
Исходя из этого, мы можем предположить, что word-break лучше всего использовать с неанглийским контентом, который требует определенных правил разбиения слов и который может перемежаться с английским контентом, в то время как overflow-wrap следует использовать во избежание поломки макеты из-за длинных строк, независимо от используемого языка.
Исторический
перенос слов Свойство overflow-wrap — стандартное имя для своего предшественника, свойство word-wrap . Перенос слов изначально был проприетарной функцией только для Internet Explorer, которая в конечном итоге поддерживалась во всех браузерах, несмотря на то, что не была стандартом.
word-wrap принимает те же значения, что и overflow-wrap , и ведет себя так же. Согласно спецификации, браузеры «должны обрабатывать word-wrap как альтернативное имя для свойства overflow-wrap , как если бы оно было сокращением overflow-wrap ».Кроме того, все пользовательские агенты должны поддерживать перенос слов на неопределенный срок по причинам устаревшего характера.
Как overflow-wrap , так и word-wrap будут проходить проверку CSS, пока валидатор настроен на проверку на соответствие CSS3 или выше (в настоящее время используется по умолчанию).
Связанные
Дополнительная информация
Поддержка браузера
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Мобильный / планшетный
| Android Chrome | Android Firefox | Android | iOS Safari | ||||
|---|---|---|---|---|---|---|---|
| 91 | 89 | 4,4 | |||||
Указанная выше «частичная» поддержка связана с тем, что старые браузеры поддерживают Черновая версия спецификации W3C редактора включает новое значение, называемое CSS: свойство переноса словВ этом руководстве по CSS объясняется, как использовать свойство CSS под названием word-wrap с синтаксисом и примерами. ОписаниеСвойство CSS word-wrap определяет, разрешено ли браузеру разрывать строку в словах, когда слово слишком длинное, чтобы поместиться в его контейнер. СинтаксисСинтаксис CSS-свойства переноса слов: Параметры или аргументы
Примечание
Совместимость с браузеромСвойство CSS word-wrap имеет базовую поддержку в следующих браузерах:
ПримерМы обсудим свойство переноса слов ниже, исследуя примеры использования этого свойства в CSS. НормальныйДавайте рассмотрим пример, в котором мы установили свойство переноса слов на нормальный . CSS будет выглядеть так: HTML будет выглядеть так: Результат будет выглядеть так: В этом примере CSS-переноса слов разрывы строк вставляются только в обычные точки разрыва слова. Поэтому, если слово слишком длинное, чтобы поместиться в его контейнер, оно выйдет за край. Как видите, слово «антидисестаблишментарианство» слишком длинное, чтобы уместиться, поэтому часть его переполняет контейнер. Слово прерыванияТеперь давайте посмотрим, что произойдет, когда мы воспользуемся тем же примером и установим для свойства переноса слов значение break-word . CSS будет выглядеть так: HTML будет выглядеть так: Результат будет выглядеть так: В этом примере CSS-переноса слов браузеру разрешено разбивать слова произвольно, если слово слишком длинное, чтобы поместиться в его контейнер.Так, в примере слова antidisestablishmentarianism разрыв строки вставлен между «antidisestablishme» и «ntarianism» вместо того, чтобы переполнять контейнер. В чем разница между «word-break: break-all» и «word-wrap: break-word» в CSS? 000 000 000 000 |
