Как поступить, если слово слишком обширное и не вмещается полностью в рамках блока?
Время для ознакомления: менее 5 мин
Последние изменения 5 июля 2023
Кратко
Скопировать ссылку "Кратко" Скопировано
Свойство word-break устанавливает правила переноса текста на новую строку, когда он достигает границы родительского элемента.
Пример
Копировать ссылку "Пример" Успешно скопировано
p word-break: normal;> p word-break: normal; > Копировать Успешно скопировано Ошибка копирования
Как пишется
Скопировать ссылку "Как пишется" Скопировано
Свойство word-break можно установить для всей веб-страницы, добавив его в стили для селектора body.
Особенности переноса текста
Скопировать ссылку "Характеристики переноса текста" Копирование выполнено
Перенос текста в CSS осуществляется по определённым принципам, которые могут варьироваться в зависимости от языка и применённых CSS стилей (включает свойства word-break, line-break, white-space, text-align, text-justify и hyphens). Вот несколько правил из спецификаций:
- Обязательные переносы: текст обязательно переносится на новую строку, если есть символы перевода строки (например, n ).
- Мягкие переносы: это такие места, где текст переносится на новую строку, если он не умещается в текущей строке. Сюда относятся пробелы и другие символы-разделители. В некоторых языках между символами могут быть и другие мягкие переносы, которые зависят от языковых правил.
- Дефисы и слоги: в алфавитных языках, таких как английский и русский, слова могут быть разбиты на слоги и перенесены с использованием дефиса и языковых правил (кстати, язык определяется по HTML-атрибуту lang ). Автоматическим переносом слов с использованием дефиса управляет свойство hyphens .
- Особенности языка: некоторые языки имеют специфические правила переноса текста. В идеографических языках, таких как китайский, и слоговых языках, таких как корейский, перенос слов и разрыв строк происходит в других местах (например, между корейскими иероглифами может быть разрыв, даже если между ними нет пробела).
Когда определены возможные места переноса, подбирается подходящее место, учитывающее заданные стили. В случае с длинными словами, ссылками или другой последовательностью символов, которые не умещаются в одной строке, мы можем указать браузеру, как следует переносить текст, используя свойства overflow — wrap и word — break .
Также свойство word — break играет важную роль в CJK языках (китайский, японский и корейский): значение word — break : keep — all запрещает разрывать слова внутри CJK текста, где разрывы строк могут быть нежелательными между определёнными иероглифами.
На практике
Скопировать ссылку "На практике" Скопировано
Свойство word — break : break — all очень похоже на overflow — wrap : break — word по своей сути. Однако, есть некоторые различия в их работе.
Свойство word — break : break — all позволяет разрывать слова в любом месте, в том числе и в середине слова, чтобы уместить их в контейнере. С одной стороны, это можно привести к трудно читаемому тексту, с другой, такой перенос хорошо подходит для переноса длинных ссылок или, например, строк кода.
Свойство overflow — wrap : break — word пришло на смену word — wrap : break — word . Оно позволяет переносить длинные слова в любом месте, а не только посередине слова. Это означает, что браузер может добавить перенос слова в любом месте, если это позволяет уместить слово внутри контейнера. Это свойство также сохраняет целостность слов, если они могут поместиться внутри контейнера.
CSS word-wrap: break-word не переносит тег, если вы не оберните его в div и не добавите там правило
будет ли обертывание в его якорном дочернем тексте нормально? ОБНОВЛЕНИЕ: только что заметили (см. поле URL-адреса экземпляра L3ST по адресу form при изменении размера окна), что мне нужен word-break: break-all вместо word-wrap: break-word, кроме предлагаемого display: inline-block , поэтому теперь используем:
который отлично работает
человек George Birbilis расписание 30.10.2016 источник источник
comment
Я предполагаю, что у вас есть фиксированная ширина для вашего div? — person andreas nbsp schedule 30.10.2016
замечание
Кажется, проблема заключается в стиле отображения якорей (см. ответ ниже), однако задайтесь вопросом, является ли этот выбор дизайна интуитивно понятным. — person George Birbilis работает только в элементах display:block; или display:inline-block; , поэтому вы можете просто использовать:
P.S. div являются display:block; по умолчанию пользовательским агентом.
paolobasso 30.10.2016
comment
спасибо, есть какое-то конкретное обоснование этого выбора дизайна? — person George Birbilis; 30.10.2016
comment
Я считаю, что перенос слов был сделан для элементов уровня блока, а не для встроенных элементов. Невозможно переполнить встроенный элемент. Вот почему существует перенос слов для предотвращения переполнения содержимым элемента уровня блока. Я думаю, что использовать его в DIV, вероятно, более правильно. — person orangeh0g; 30.10.2016
comment
Вероятно, потому что вы можете установить ширину для блочных элементов. Естественно, что встроенные элементы (например, a ) не имеют фиксируемой ширины и будут расширяться, чтобы содержать свое содержимое. — person Dave Cripps; 30.10.2016
comment
comment
Кстати, в этом другом вопросе есть несколько интересных комментариев, например, размещение таких якорей внутри списка UL нарушит некоторые правила (в Chrome), и им придется установить их встроенными или, я думаю, использовать! important. У них также есть указатель на спецификацию в другом комментарии w3.org/ TR / CSS2 / visuren.html # display-prop — person George Birbilis; 30.10.2016
заметка
заметка
на всякий случай тот комментарий о том, что UL переопределяет правила в Chrome, я использовал! important. Также я обнаружил, что word-wrap: break-word не работает, и вместо этого использовал word-break: break-all. Можно увидеть, как он работает в форме, которую я упоминаю в разделе обновлений в конце исходного вопроса — person George Birbilis; 30.10.2016
Проблемы с переносом слов
Я написал электронную книгу, и это был сущий кошмар, когда мне приходилось сталкиваться с CSS переносом текста внутри блоков кода. Иногда высота блока текста выше, чем контейнера. Иногда проблемы возникали из-за длинных URL-адресов.
Обновлено: Вадим Дворников автор материала
Свойства
Когда речь заходит о решении проблем переноса текста с помощью CSS , мы уже не можем говорить о " стандартных вариантах ". Некоторые случаи решаются довольно просто и логично, в то время как другие вовсе нет. Одни свойства просто работают без дополнительной доработки, а другие требуют боле тщательной настройки.
Давайте бегло рассмотрим основные свойства.
Свойство word-wrap принимает два значения: normal ( по умолчанию ) и break-word . Это не считая трех глобальных значений: inherit , initial и unset .
По умолчанию особенно длинное слово не будет разрываться. При CSS переносе текста на новую строку браузер сохраняет это поведение, пока дело не доходит до просмотра текста на смартфоне. Контейнер слова может быть адаптивным, а само слово будет вываливаться за его границы, что приведет к появлению горизонтальной прокрутки по ширине страницы.
В первом примере показано поведение по умолчанию для таких случаев:
Второй пример данной демо-версии демонстрирует работу свойства overflow-wrap: break-word, которое задает браузеру разрывать слово, если оно превышает границы контейнера.
Важно отметить : в текущей версии спецификации по текстам CSS3 свойство word-wrap было заменено на overflow-wrap , которое принимает те же значения. Здесь вы найдете обзор поддержки браузерами этого нового свойства .
Свойство word-break предназначено только для требующих определенного поведения языков ( китайского, японского и корейского ).
Я обычно использовал его для CSS переноса длинных слов, но, если речь не идет о не выше перечисленных языках, то лучше использовать свойство overflow-wrap, о котором я только что рассказал.
Свойство hyphens указывает браузеру, как обрабатывать переносы слов с добавлением дефисов. Оно принимает следующие значения: none , manual и auto . Это свойство на данный момент поддерживается браузерами не полностью, поэтому будет работать нормально только в Firefox .
Значение none задает поведение, при котором дефисы никогда не будут добавляться в слова при разрыве строк.
При использовании значениия manual слова будут разрываться при разрыве строк только на символах, которые указывают это. В разметку добавляются специальные теги, на которых при необходимости переносятся слова.
Тег — задает жесткий перенос — он указывает разрывать слово в этом месте, если это необходимо, но сам дефис отображается на экране, независимо от того, переносится слово или нет.
Тег задает мягкий CSS перенос текста на новую строку – он указывает разрыв слова, если это необходимо, но дефис на экране отображается только, если слово переносится.
Значение auto указывает, что слова могут разрываться в определенных местах или автоматически согласно разрешениям, указанным в ресурсах для конкретных языков ( если они предоставляются браузером ). В этом случае переносы будут зависеть от конкретного языка, и для документа должен быть указан атрибут lang .
Я склонен применять свойство white-space. Оно задает правила обработки пробелов, табуляций и принудительных разрывов строк внутри элемента. Это свойство может быть крайне полезным для диагностики проблем и позволяет лучше контролировать содержимое ячейки таблицы.
Свойство принимает пять значений: normal ( по умолчанию ), nowrap , pre , pre-wrap и pre-line .
Приведенная ниже демо-версия иллюстрирует все эти значения в действии; учитывайте дополнительные промежутки, включенные в разметку.
При CSS переносе текста в блоке по умолчанию пустые пространства объединяются и строки разрываются, чтобы соответствовать размерам контейнера. Это показано в первом примере, где в текст добавлены дополнительные пробелы, но при отображении они не выводятся.
Значение nowrap ( пример 2 ) также не воспринимает дополнительные пробелы, но в отличие от normal строки текста не переносятся в соответствии с размерами контейнера.
pre поддерживает дополнительное пробелы в разметке и не разрывает строки при выходе за пределы контейнера, как показано в примере 3.
Пример 4, pre-wrap не объединяет пустые пространства, но переносит строки при выходе за пределы контейнера.
Значение pre-line объединяет пробелы ( за исключением символов перехода на новую строку ) и разрывают текст, чтобы он соответствовал границам контейнера, как показано в последнем примере.
Для переноса текста в CSS можно использовать свойство word-wrap.
Блоки кода
По умолчанию блоки кода оборачиваются в теги pre и не переносятся. Это может привести к большой путанице.
Исходя из моего опыта, можно утверждать, что способ решения данной проблемы зависит от специфики языка. Проблему можно устранить, применяя жесткие CSS переносы слов (без использования дефисов) или же внедряя горизонтальную прокрутку.
Убедитесь, что все установленные значения white-space не приводят к объединению пустых пространств и пробелов, иначе это нарушит синтаксис кода.
Я также столкнулся со сложностями, связанными с адаптацией кода при структурировании верстки из-за использования таблиц. В таких случаях я применяю специальный стиль для контейнера таблицы, чтобы переопределить его поведение.
Многоточия, которые имеют значение
CSS text-overflow: ellipsis является неудобным. Оно требует добавления большого количества кода, так как работает только в сочетании с кучей других свойств. Кроме этого, оно действует только на одну строку текста, что делает его еще более неудобным. Есть JQuery-плагин , dotdotdot , который создает многоточие. С его помощью можно добавить даже ссылку в конце для продолжения чтения.
Вот пример его применения:
Супер специфические расположения разрывов
Иногда нужно, чтобы слова разрывались, но только в очень специфических местах. Это делает все еще сложнее. Как нам сообщить браузеру, что в этих местах нужно добавлять CSS перенос текста ?
Это достигается за счет использования мягкого или твердого переноса с помощью дефисов, который мы рассматривали ранее. При необходимости строка будет разрываться в местах, где добавлены теги :
Привет! Как ты провел свои выходные? Я занимался росписью посуды, было довольно здорово.
Слишком длинные ссылки
Когда я готовил к выходу свою электронную книгу, мне неоднократно приходилось сталкиваться с проблемой слишком длинных ссылок.
По умолчанию они не разрываются, и это приводит к некорректному отображению на небольших экранах. URL-адрес нужно разрывать, когда это необходимо, но без дефисов, чтобы ссылка осталась рабочей. Также нужно быть очень осторожным при применении CSS переносов . Если вы сделаете что-то неправильно, разрываться будут не только URL-адреса , но и любые слова.
Применив overflow-wrap: break-word к ссылке, вы зададите разрыв URL-адреса при ее выходе за пределы контейнера, хотя это свойство поддерживается не во всех браузерах.
Найти оптимальное сочетание характеристик для решения проблемы переноса может быть сложной задачей. Однако, потратив время на практику и проанализировав допущенные ошибки, вы сможете выявить правильное решение:
Вадим Дворников автор-переводчик статьи « Word Wrapping Woes »
