Укрощаем длинный текст средствами HTML и CSS — Блог
Укрощаем длинный текст средствами HTML и CSS
8 января 2019 0 Александра Пирс
Перенос длинных слов
Проблема переноса длинных слов встречается не так редко, как может показаться. Если не брать во внимание слова-рекордсмены вроде “метилпропенилендигидроксициннаменилакрилической кислоты”, порой в установленные макетом страницы рамки не умещаются менее экзотические слова.
Браузеры по умолчанию не разбивают длинные слова на несколько строк.
Перенос на новую строку происходит только там, где стоит дефис, пробел или 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>
Проблемы с переносом слов | 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»
: Элемент Line Break — HTML: Язык гипертекстовой разметки
HTML-элемент создает разрыв строки в тексте (возврат каретки).
Это полезно для написания стихотворения или адреса, где важно разделение строк.
Как видно из приведенного выше примера, элемент включается в каждую точку, где мы хотим, чтобы текст прерывался. Текст после
снова начинается с начала следующей строки текстового блока.
Примечание: Не используйте для создания полей между абзацами; оберните их в
margin для управления их размером.
Атрибуты этого элемента включают глобальные атрибуты.
Устаревшие атрибуты
-
очиститьУстаревший Указывает, с чего начинать следующую строку после разрыва.
Элемент имеет единственную, четко определенную цель — создать разрыв строки в текстовом блоке. Таким образом, у него нет собственных размеров или визуального вывода, и вы мало что можете сделать для его стилизации.
Вы можете установить поле для самих элементов , чтобы увеличить расстояние между строками текста в блоке, но это плохая практика — вам следует использовать свойство
line-height , которое было разработано для этой цели.
Simple br
В следующем примере мы используем элементы для создания разрывов строк между разными строками почтового адреса:
Mozilla
331 Э. Эвелин АвенюМаунтин-Вью, Калифорния
94041
США
Результат выглядит так:
Создание отдельных абзацев текста с использованием не только плохая практика, но и проблематично для людей, которые ориентируются с помощью технологии чтения с экрана. Программы чтения с экрана могут объявить о наличии элемента, но не о любом содержимом, содержащемся в пределах
с. Это может сбить с толку и разочаровать человека, использующего программу чтения с экрана.
Используйте margin , для управления расстоянием между ними.
| Категории контента | Потоковое содержание, фразовое содержание. |
|---|---|
| Разрешенный контент | Нет; это пустой элемент. |
| Отсутствие тега | Должен иметь начальный тег и не иметь конечного тега. В XHTML-документах
запишите этот элемент как . |
| Разрешенные родители | Любой элемент, принимающий фразовое содержание. |
| Неявная роль ARIA | Нет соответствующей роли |
| Разрешенные роли ARIA | нет , презентация |
| Интерфейс DOM | HTMLBRЭлемент |
| Спецификация |
|---|
| Стандарт HTML # the-br-element |
-
<адрес>элемент -
-
Обнаружили проблему с содержанием этой страницы?
- Отредактируйте страницу на GitHub.
- Сообщить о проблеме с содержимым.
- Посмотреть исходный код на GitHub.
Хотите принять участие?
Узнайте, как внести свой вклад.
Последний раз эта страница была изменена участниками MDN.
Использование br для вставки разрывов строк в HTML: вот как »
В тегах HTML
Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Подробнее
- Элемент
- Узнайте, как шрифты и веб-типографика работают в HTML: Руководство для начинающих
- Что делает
Использование br для вставки разрывов строк в HTML: вот как это делает? - Элемент
используется для вставки разрыва строки или возврата каретки в родительский элемент, такой как абзац, без разрыва родительского контейнера. - Дисплей
- Встроенный
- Использование
- Текстовый
Содержание
- 1 Пример кода
- 2 Не злоупотребляет линейными разрывами
- 3 Browsh
Это предложение и следующее будут в разных строках.
Это предложение и предыдущее будут в разных строках.Это предложение и следующее будут на разных строках.
Это предложение и предыдущее будут в разных строках.Не злоупотребляйте разрывами строк
Элемент
- адресов
- поэзии
- образцов кода
John Smith
c/o Jane Smythe
123 Main St.
Northeast Southwestershire, XY 12345John Smith
c/o Jane Smythe
123 Main St.
Northeast Southwestershire, XY 12345Из ночи, покрывающей меня,
Черной, как бездна, от полюса до полюса,
Я благодарю всех богов
За мою непобедимую душу.В тисках обстоятельств
Я не дрогнул и не закричал вслух.
Под ударами случая
Моя голова в крови, но непокорена.За пределами этого места гнева и слезы
Маячит лишь Ужас тени,
И все же угроза лет
Находит и найдет меня, не боясь.Неважно, насколько тесны врата,< br> Как наполнен свиток наказаниями,
— Invictus, с картины Уильяма Эрнеста Хенли < /цитата>
Я хозяин своей судьбы:
Я капитан своей души.Из ночи, покрывающей меня,
Черной, как бездна, от полюса до полюса,
Я благодарю всех богов
За мою непобедимую душу. В падении обстоятельств
я не вздрогнул и не закричал вслух.
Под ударами случая
Моя голова окровавлена, но непокорена. За этим местом гнева и слез
Мчится лишь Ужас тени,
И все же угроза лет
Находит и найдет меня, не боясь. Неважно, насколько тесны врата,
Как заряжен свиток наказаниями,
Я хозяин своей судьбы:
Я капитан своей души.— Invictus , Уильям Эрнест Хенли
Если вы обнаружите, что используете
margin.Адам Вуд
Адам — технический писатель, специализирующийся на документации и руководствах для разработчиков.
Browser Support for br
All All All All All All Attributes of br
Имя атрибута Значения Примечания очистить Используется для гарантии того, что разрывы строк «очищены» от плавающих или выровненных элементов над ними.
За этим местом гнева и слез 