Какова цель свойства css word wrap break break word

Обновлено: 21.11.2024

В этом учебном пособии по CSS объясняется, как использовать свойство CSS, называемое переносом слов, с синтаксисом и примерами.

Описание

Свойство CSS word-wrap определяет, разрешено ли браузеру разрывать строку внутри слов, когда слово слишком длинное и не помещается в контейнере.

Синтаксис

Синтаксис CSS-свойства переноса слов:

Параметры или аргументы

Дополнительный интервал между словами (в дополнение к стандартному интервалу для шрифта). Это может быть одно из следующих:

Значение Описание
break-word Слова может быть произвольно разорван, если слово слишком длинное и не помещается в контейнер
p
normal Допускаются только обычные точки разрыва слова
p
  • Если свойство переноса слов выражается как фиксированное значение, оно может быть как положительным, так и отрицательным.
    • Положительное значение добавит дополнительный интервал между словами (в дополнение к стандартному интервалу для шрифта).
    • Отрицательное значение приведет к удалению пробела между словами.

    Совместимость браузера

    Свойство CSS word-wrap имеет базовую поддержку в следующих браузерах:

    • Хром
    • Firefox (Геккон)
    • Internet Explorer 5.5+ (IE 5.5+)
    • Опера 10.5+
    • Сафари (WebKit)

    Пример

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

    Обычный

    Давайте рассмотрим пример, в котором для свойства word-wrap установлено значение normal.

    CSS будет выглядеть следующим образом:

    HTML будет выглядеть следующим образом:

    Результат будет выглядеть следующим образом:

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

    Разбить слово

    Теперь давайте посмотрим, что произойдет, если мы воспользуемся тем же примером и установим для свойства word-wrap значение break-word.

    CSS будет выглядеть следующим образом:

    HTML будет выглядеть следующим образом:

    Результат будет выглядеть следующим образом:

    В этом примере CSS с переносом слов браузер может произвольно разбивать слова, если слово слишком длинное и не помещается в контейнер. Таким образом, в примере со словом антидезистестментарианство разрыв строки вставляется между "антидезистестменте" и "нтарианство" вместо того, чтобы переполнять контейнер.

    Разрешить перенос длинных слов на следующую строку:

    Определение и использование

    Свойство word-wrap позволяет разбивать длинные слова и переносить их на следующую строку.

    Значение по умолчанию: нормальное
    Унаследовано: да
    Анимация: нет. Прочтите об animatable
    Версия: CSS3
    синтаксис JavaScript : object.style.wordWrap="break-word" Попробуйте

    Поддержка браузера

    Числа в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.

    Синтаксис CSS

    Значения свойств

    Значение Описание Демо
    нормальный< /td> Разрывать слова только в разрешенных точках разрыва. Это значение по умолчанию Demo ❯
    break-word Разрешает разбивать неразрывные слова Demo ❯
    initial Устанавливает для этого свойства значение по умолчанию. Подробнее о initial
    inherit Наследует это свойство от родительского элемента. Прочтите об наследовании

    Похожие страницы

    Мы только что запустили
    видео W3Schools

    ПИКЕР ЦВЕТА

    Получите сертификат
    пройдя курс
    сегодня!

    КОД ИГРА

    Сообщить об ошибке

    Если вы хотите сообщить об ошибке или сделать предложение, не стесняйтесь отправить нам электронное письмо:

    Спасибо за помощь!

    Ваше сообщение было отправлено в W3Schools.

    Лучшие учебные пособия
    Лучшие ссылки
    Лучшие примеры
    Веб-курсы

    W3Schools оптимизирована для обучения и повышения квалификации. Примеры могут быть упрощены для улучшения чтения и обучения.Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, политику конфиденциальности и файлы cookie.

    В наше время очень важно сделать сайт адаптивным, чтобы он корректно отображался на всех устройствах. К сожалению, несмотря на все ваши усилия, вы все равно можете получить неработающие макеты.

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

    Использование свойств CSS word-wrap , overflow-wrap и word-break

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

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

    Как происходит перенос содержимого в браузерах?

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

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

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

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

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

    В чем разница между мягким переносом и принудительным разрывом строки?

    Любой перенос текста, который происходит при возможности мягкого переноса, называется разрывом мягкого переноса. Чтобы перенос происходил при возможности мягкого переноса, вам нужно убедиться, что вы включили перенос. Например, если задать для свойства CSS white-space значение nowrap, перенос будет отключен.

    Мы сделали специальное демо для .
    Нет, правда. Нажмите здесь, чтобы проверить это .

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

    Свойства CSS переноса слов и переполнения

    Имя word-wrap — это устаревшее имя свойства CSS overflow-wrap. Word-wrap изначально был расширением Microsoft без префикса. Это не было частью стандарта CSS, хотя большинство браузеров реализовали его под названием word-wrap. Согласно черновому варианту спецификации CSS3, для совместимости браузеры должны рассматривать word-wrap как устаревший псевдоним свойства overflow-wrap.

    В большинстве последних версий популярных веб-браузеров реализовано свойство overflow-wrap.

    Ниже показано, что в проекте спецификации CSS3 говорится о свойстве overflow-wrap:

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

    Если у элемента есть свойство white-space, вам нужно установить его значение, чтобы разрешить обертку для overflow-wrap.

    Ниже приведены значения свойства overflow-wrap. Вы также можете использовать глобальные значения inherit , initial , revert и unset с overflow-wrap , но мы не будем их здесь рассматривать.

    В подразделах ниже мы рассмотрим значения CSS-свойства overflow-wrap, описанные выше, чтобы понять поведение этого свойства.

    Обычный в CSS

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

    На изображении ниже в тексте есть слово, которое длиннее своего контейнера. Поскольку в нем нет возможности мягкого переноса, а значение свойства overflow-wrap равно normal , слово переполняет свой контейнер. Он описывает поведение системы по умолчанию при разрыве строки.

    Везде

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

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

    Когда вы используете где угодно , браузер будет учитывать возможности мягкого переноса, представленные разрывом слова, при расчете внутренних размеров минимального содержания:

    В отличие от предыдущего раздела, где мы использовали overflow-wrap: normal , на изображении ниже мы используем overflow-wrap:where . Выходящее за пределы слово, которое в противном случае невозможно разбить, разбивается на фрагменты текста с помощью overflow-wrap: в любом месте, чтобы оно помещалось в свой контейнер.

    Разрывное слово

    С точки зрения функциональности значение break-word такое же, как и везде. Если браузер может перенести слово, выходящее за пределы строки, без переполнения, это то, что он сделает.

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

    На изображении ниже показано, как браузер разрывает выходящий за пределы текст в предыдущем разделе, когда вы применяете overflow-wrap: break-word . Обратите внимание, что изображение ниже выглядит так же, как изображение в последнем подразделе. Разница между overflow-wrap: Anywhere и overflow-wrap: break-word заключается в расчете внутренних размеров минимального содержимого.

    Разница между параметрами Anywhere и Break-Word очевидна при расчете внутренних размеров минимального содержимого. С break-word браузер не учитывает возможности мягкого переноса, представленные словом break, при вычислении внутренних размеров минимального содержимого, но он делает это в любом месте. Чтобы узнать больше о внутренних размерах min-content, вы можете прочитать эту статью.

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

    Свойство CSS для разрыва слов

    Разрыв по словам – это еще одно свойство CSS, которое можно использовать для указания возможностей мягкого переноса между символами. Вы можете использовать это свойство, чтобы разбить слово именно в том месте, где может произойти переполнение, и перенести его на следующую строку.

    Ниже в проекте спецификации CSS3 говорится о свойстве Word-break:

    Это свойство указывает возможности мягкого переноса между буквами, т. е. там, где это «нормально» и разрешено разрывать строки текста. Он контролирует, какие типы букв браузер может объединять вместе, чтобы сформировать неразрывные «слова», в результате чего символы CJK ведут себя как текст, отличный от CJK, или наоборот.

    Break-word также является значением свойства CSS word-break, хотя оно устарело. Однако браузеры по-прежнему поддерживают его по устаревшим причинам. Указание этого свойства имеет тот же эффект, что и word-break: normal и overflow-wrap: везде.

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

    Установка разрыва слов на обычный

    Установив для свойства word-break значение normal, будут применяться правила разрыва слов по умолчанию:

    На изображении ниже показано, что происходит, когда вы применяете стиль word-break: normal к блоку текста, который содержит слово длиннее, чем его контейнер. То, что вы видите, — это обычные действующие правила разбиения слов браузера.

    Выбор всех

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

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

    На изображении ниже я применил стиль word-break: break-all к элементу p шириной 240 пикселей, содержащему выходящий за пределы текст. Браузер вставляет разрыв строки в месте, где может произойти переполнение, и переносит оставшийся текст на следующую строку.

    При использовании break-all слово разрывается между двумя символами именно в том месте, где в английском и других родственных языковых системах может произойти переполнение. Однако это не будет применяться к текстам на китайском, японском и корейском языках (CJK).

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

    Сохранить все

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

    На изображении ниже применение word-break: keep-all имеет тот же эффект, что и word-break: normal, потому что я использую систему письма, отличную от CJK (английскую).

    Теперь, когда мы рассмотрели CSS-свойства overflow-wrap и word-break, в чем разница между ними? Раздел ниже прольет свет на это.

    В чем разница между overflow-wrap и word-break?

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

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

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

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

    Устранение неполадок с переполнением содержимого CSS с помощью Chrome DevTools

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

    Он предоставляет возможность выбрать элемент в дереве DOM, чтобы вы могли просматривать, добавлять и удалять объявления CSS и многое другое. Это поможет вам отследить оскорбительный стиль CSS в вашем макете и легко исправить его.

    Чтобы открыть Chrome DevTools, нажмите F12 . В открытом состоянии это выглядит так, как показано на изображении ниже. При выборе элемента в дереве DOM отобразятся соответствующие ему стили CSS. Вы можете изменить стили и посмотреть, как это отразится на вашем макете, когда вы отследите источник ошибки.

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

    Установка значения свойства overflow-wrap в любом месте или break-word в содержимом таблицы не приведет к разрыву переполняющего слова, как в приведенных выше примерах. Таблица переполнит свой контейнер и при необходимости создаст горизонтальную прокрутку.

    Чтобы таблица поместилась в своем контейнере и работала технология overflow-wrap, задайте для свойства table-layout значение fixed и установите для ширины таблицы значение 100 % или какое-либо фиксированное значение.

    Заключение

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

    Имя overflow-wrap является псевдонимом устаревшего свойства word-wrap. Таким образом, вы можете использовать их взаимозаменяемо. Однако стоит отметить, что поддержка браузерами нового свойства overflow-wrap все еще невелика. Вам лучше использовать word-wrap вместо overflow-wrap, если вы хотите почти универсальную поддержку браузера. Согласно проекту спецификации CSS3, браузеры и пользовательские агенты должны продолжать поддерживать перенос слов по устаревшим причинам.

    Если вы хотите управлять переполнением контента, может быть достаточно overflow-wrap или его устаревшего названия word-wrap.

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

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

    Ваш интерфейс загружает ЦП ваших пользователей?

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

    Перенос слов – это свойство, которое делает контент удобочитаемым для пользователей. Другими словами, это функция, которая разбивает слова таким образом, чтобы они не пересекали границы определенного контейнера. Свойство CSS Word Wrap было адаптировано из одноименной функции, предлагаемой Microsoft, в которой вместо того, чтобы заставлять пользователя прокручивать по горизонтали, чтобы прочитать все предложение, предложение разбивается на части, чтобы соответствовать окну. Позже свойство word-wrap было переименовано в overflow-wrap, но по-прежнему используется как псевдоним.

    Синтаксис:

    Веб-разработка, языки программирования, тестирование программного обеспечения и другое

    overflow-wrap: normal| ключевое слово;

    Примеры переноса слов в CSS

    Для свойства overflow-wrap, если мы используем значение параметра как обычно, это приведет к разрыву строки слов в обычной точке разделения, такой как точка, пробел или разделитель-запятая. В случае, если мы используем word-break, в противном случае неразрывные слова будут разбиваться, чтобы соответствовать контейнеру. Это свойство можно использовать с пользой, если у нас есть несколько контейнеров на странице. Давайте рассмотрим некоторые варианты использования свойства overflow-wrap.

    • Когда мы используем параметр normal, предложения или строки разрываются только через допустимые интервалы, такие как запятые, точки или пробелы между словами. Он не разбивает длинные слова, даже если пересекает границы.
    • Для этого примера мы будем использовать внешний CSS, поэтому сначала создадим файл CSS.
    • Мы определим стиль для

    Код CSS:

    Ширина блока: 100 пикселей;
    поле: 20px;
    фон: бледный золотарник;
    граница: 5px пунктирная светло-голубая;
    box-shadow: вставка 10px 10px 15px 15px белый;
    Начертание шрифта: курсив;
    overflow-wrap: нормальный;
    >

    • Поскольку CSS определен, мы создадим HTML-файл. В этом примере используется внешний CSS, поэтому мы прежде всего вызовем соответствующий файл в нашем HTML-коде.
    • Затем мы закодируем тело страницы, чтобы использовать

    HTML-код:

    Это тест на переполнение

    Это очень длинное предложение, так как это тестовый контент для свойства overflow-wrap. Давайте посмотрим, как это работает по-другомуyyyyyyyyy. Это ооооооооооооооооооооооооооооооооое слово

    Читайте также: