Перенос слов CSS (свойства overflow-wrap, word-wrap, word-break, hyphens) — Примеры
Указанные ниже свойства CSS определяют как переносить длинные слова:
- только там, где стоит чёрточка, пробел или Enter (искл., неразрывный пробел
и неразрывный дефис‑). Между частями одного слова пишется дефис (например, красно‐жёлтый), между словами — тире. «Мягкий дефис»­проявляется только при необходимости переноса. Если слово выходит за рамки родителя, то<wbr>или​переносит его часть без чёрточки. В математических выражениях используется минус (например, 5 − 2). В номерах телефонов отображается цифровая чёрта (например, +7 800 000‒00‒00). И всё это не является той знакомой -, что есть на клавиатуре. - после любого символа.
- согласно правилам русского языка с автоматическим применением дефиса.
overflow-wrap▼break-wordword-wrap▼break-wordword-break▼keep-allbreak-all
уже переосвидетельствовался наш тысячадевятьсотдевяностодевятикилограммовый корчеватель‐бульдозер‐погрузчик
<style> .div { overflow-wrap: normal;break-word; word-wrap: normalbreak-word; word-break: normal;keep-all;break-all; line-break: autoloosenormalstrict; -webkit-hyphens: none; -webkit-hyphens: auto; -ms-hyphens: none;-ms-hyphens: auto; hyphens: manualnoneauto; width: 50%; white-space: nowrap;} </style> <div lang="ru"lang="ru">уже переосвидетельствовался наш тысячадевятьсотдевяностодевяти­килограммовый корчеватель‐бульдозер‐погрузчик</div>
div {
overflow-wrap: normal;break-word;
word-wrap: normalbreak-word;
word-break: normal;keep-all;break-all;
line-break: autoloosenormalstrict;
-webkit-hyphens: none; -webkit-hyphens: auto; -ms-hyphens: none;-ms-hyphens: auto; hyphens: manualnoneauto;
width: 50%;
white-space: nowrap;}
</style>
<div lang="ru"lang="ru">уже переосвидетельствовался наш тысячадевятьсотдевяностодевяти­килограммовый корчеватель‐бульдозер‐погрузчик</div>В чём состоит различие одно свойства от другого
По умолчанию длинные слова не переносятся, если на то нет явных указаний с помощью дефиса, и начинаются с новой строки.
Для того, чтобы игнорировались черточки, сразу видимые глазу, вносим word-break: keep-all;.
Для того, чтобы браузер не обращал внимания и на мягкий дефис, вставляем hyphens: none;.
Если требуется перенос слов, то word-wrap: break-word; советую применять всегда, поскольку он понимается всеми браузерами. Он отличается от word-break: break-all;, которое является приоритетным, тем, что слова, которые не помещаются в блок, начинаются с новой строки и учитывается рекомендация мягкого дефиса.
При совместном использовании word-break: break-all; с hyphens: auto;, последнее игнорируется. hyphens: auto; расставляет любые дефисы по своему усмотрению. Но для того, чтобы оно работало, нужно обозначить свой язык, указав в div атрибут lang="ru".
Не переносить слова на другую строку
Управлять переносом слов при hyphens: auto;
Тетрагидропиранилциклопентилтетрагидропиридопиридиновые
<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>Перенос слов в тексте html, css
Задать вопрос
Вопрос задан
Изменён 5 лет 1 месяц назад
Просмотрен 20k раз
Есть текст в <pre> теге. Слова в тексте не переносятся, а режутся.
Я пытаюсь сделать так, чтобы слова переносились целиком, а не по частям.
Например, текст «пылесосный пылесосательный пылесос» должен вывести всего первых два слова, а последнее перенести. Вместо этого выходить что-то типа «пылесосный пылесосательный пыл <перенос> есос».
Вот код, который не делает, что мне надо :С
<pre> </pre>
- html
- css
- css3
5
По умолчанию именно так и работает — перенос по словам.
word-break.Помимо этого, исправить можно одним из следующих способов:
pre {
white-space: pre-wrap;
overflow: auto;
border: 1px dotted red;
width: 32ch;
float: left;
margin: .5em;
min-height: 7em;
}
.break {
word-break: break-all;
}
.cancel {
word-break: break-word;
word-wrap: break-word;
overflow-wrap: break-word;
}
. to-normal {
word-break: normal;
word-wrap: normal;
overflow-wrap: normal;
}
pre:before {
content: attr(class) "\A0\A";
color: blue;
}
to-normal {
word-break: normal;
word-wrap: normal;
overflow-wrap: normal;
}
pre:before {
content: attr(class) "\A0\A";
color: blue;
}<pre>пылесосный пылесосательный пылесос 1234567890123456789012345678901234567890</pre> <pre>пылесосный пылесосательный пылесос 1234567890123456789012345678901234567890</pre> <pre>пылесосный пылесосательный пылесос 1234567890123456789012345678901234567890</pre> <pre>пылесосный пылесосательный пылесос 1234567890123456789012345678901234567890</pre>
2
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Более умный перенос слов в CSS?
спросил
Изменено 7 месяцев назад
Просмотрено 32к раз
Если я просто добавлю word-break: break-all к элементу, я часто получаю это:
Привет, люди, я набираю сообщение
шалфей слишком длинный, чтобы поместиться!
Очевидно, это было бы намного лучше, как:
Здравствуйте, я набираю сообщение
, оно слишком длинное!
Но при этом если кто напишет:
БЛАААААААРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРР GGGGGGHHHHHHHHH!!!!!!
Тогда я бы хотел, чтобы это было:
БЛАААААААРРРРРРРРРРРРРРРРРРР
РГГГГГГГХХХХХХХХ!!!!!!
Кажется, я не могу найти способ сделать это.
Обратите внимание, что ширина элемента не фиксирована и может меняться.
- css
- разрыв слова
1
Попробуйте word-break: break-word; он должен вести себя так, как вы ожидаете.
Во многих наших проектах мы обычно добавляем это при необходимости:
.text-that-needs-wrapping {
overflow-wrap: break-word;
перенос слов: прерывание слова;
-ms-word-break: сломать все;
слово-разрыв: слово-разрыв;
-ms-дефисы: авто;
-moz-дефис: авто;
-webkit-дефисы: авто;
дефисы: авто;
}
Обрабатывает большинство странных ситуаций с разными браузерами.
2
Обновленный ответ должен быть:
overflow-wrap:break-word;
Это разобьет слово, которое само по себе не сможет поместиться в отдельной строке, но оставит все остальные слова такими, какие они есть (см.
overflow-wrap здесь).
Вы также можете использовать:
overflow-wrap:anywhere; , но это позволит разрывать строки после любого слова, чтобы уменьшить ширину элемента. См. отличие, описанное ниже, от MDN:
[break-word is] То же, что и в любом месте, с обычно неразрывными словами, разрешенными для разрыва в произвольных точках, если в строке нет других приемлемых точек разрыва, но возможности мягкого переноса, представленные разрывом слова, НЕ учитываются, когда вычисление внутренних размеров минимального содержимого.
Кроме того, в любом месте не поддерживается Internet Explorer, Safari и некоторыми мобильными браузерами, в то время как break-word поддерживается во всех основных браузерах (см. [здесь] [2]).
слово-разрыв: слово-разрыв; больше не следует использовать, потому что он устарел в пользу overflow-wrap:break-word; . Теперь свойство word-break предназначено для использования, когда вы хотите разбить слова независимо от того, могут ли они поместиться на отдельной строке (например, первый пример OP с 
В отличие от word-break, overflow-wrap создаст разрыв только в том случае, если целое слово не может быть размещено на отдельной строке без переполнения.
(Из overflow-wrap, также связанного выше)
Для умных разрывов слов или для правильных разрывов слов в первую очередь вам нужны языково-зависимые правила. Для английского и многих других языков правильный разрыв означает перенос, с добавлением дефиса в конце строки, когда происходит разрыв.
В CSS вы можете использовать дефис : auto , хотя в основном вам все равно нужно дублировать его, используя префиксы поставщиков. Поскольку это не работает в IE 9, вместо этого вы можете рассмотреть расстановку переносов на основе JavaScript, например Hyphenate.js. В обоих случаях необходимо использовать языковую разметку ( 9атрибут 0011 lang ).
Разрыв длинных строк без дефиса — это отдельная проблема. Их лучше всего обрабатывать в предварительной обработке, но в простой настройке word-break: break-word (что означает неправильное нарушение слов, например, на английском языке) может рассматриваться как чрезвычайная ситуация.
1
overflow-wrap: везде; это то, что вам нужно.
1
Это то, что вы ищете:
.break-word {
-ms-word-break: сломать все;
-ms-word-wrap: сломать все;
-webkit-word-break: слово-разрыв;
-webkit-word-wrap: разбить слово;
слово-разрыв: слово-разрыв;
перенос слов: прерывание слова;
-webkit-дефисы: авто;
-moz-дефис: авто;
дефисы: авто;
}
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Полное руководство по CSS word-wrap, overflow-wrap и word-break.
в CSS был последний раз обновлен 24 февраля 2023 года, чтобы отразить самую последнюю версию CSS, включить интерактивные примеры кода и включить раздел о том, как обтекать текст с помощью CSS. Чтобы узнать больше о свойстве overflow , ознакомьтесь с нашим руководством по CSS 9.0011 переполнение . Сделать сайт адаптивным, чтобы он корректно отображался на всех устройствах, очень важно в наше время. К сожалению, несмотря на все ваши усилия, вы все равно можете получить неработающие макеты. Сломанные макеты могут произойти, когда определенные слова слишком длинны, чтобы поместиться в контейнер. Переполнение контента может произойти, когда вы имеете дело с пользовательским контентом, над которым у вас нет контроля, например, с разделом комментариев к сообщению. Поэтому вам необходимо применить стили, чтобы предотвратить переполнение контейнера содержимым.
Переполнение контента — распространенная проблема для разработчиков интерфейсов. В Интернете переполнение происходит, когда ваш контент не полностью помещается в содержащий его элемент.
В результате он выплескивается наружу. В CSS вы можете управлять переполнением содержимого в основном с помощью свойств CSS overflow , word-wrap , overflow-wrap и word-break . Тем не менее, в этой статье мы сосредоточимся на переносе слов , переполнении и переносе слов 9 .0012 Свойства CSS.
Перейти вперед:
- Использование
word-wrap,overflow-wrapиword-breakсвойства CSS- Как происходит перенос содержимого в браузерах?
- В чем разница между мягким разрывом строки и принудительным разрывом строки?
- Общие сведения о свойствах CSS
Word-wrapиoverflow-wrap-
Обычный -
Где угодно -
Разрывное слово
-
- Реализация свойства CSS
Word-break- Настройка
Word-breakдоОбычный - Значение
Break-all - Использование значения
Keep-all
- Настройка
- В чем разница между
overflow-wrapиword-break? - Как переносить текст с помощью CSS
- Устранение неполадок переполнения содержимого CSS с помощью Chrome DevTools
Использование
word-wrap , overflow-wrap и word-break свойства CSS Вы можете использовать свойства 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 и overflow-wrap Имя word-wrap — это устаревшее имя свойства CSS overflow-wrap . Word-wrap изначально был расширением Microsoft без префикса и не был частью стандарта CSS, хотя большинство браузеров реализовали его с именем word-wrap . Согласно проекту спецификации CSS3, браузеры должны рассматривать word-wrap как унаследованный псевдоним имени 9.0011 свойство overflow-wrap для совместимости.
В самых последних версиях популярных веб-браузеров реализовано свойство overflow-wrap .
Черновая спецификация CSS3 относится к свойству overflow-wrap как:
Это свойство указывает, может ли браузер прерываться в запрещенных точках внутри строки, чтобы предотвратить переполнение, когда неразрывная строка слишком длинна и не помещается в поле строки.
Если у вас white-space для элемента, вам нужно установить его значение, чтобы разрешить обертку для overflow-wrap , чтобы иметь эффект. Ниже приведены значения свойства overflow-wrap :
overflow-wrap: обычный; overflow-wrap: везде; overflow-wrap: break-word;
Вы также можете использовать глобальные значения inherit , initial , revert и unset с overflow-wrap , но мы не будем их здесь рассматривать. В подразделах ниже мы рассмотрим значения overflow-wrap Свойство CSS, описанное выше, чтобы понять поведение этого свойства.
Обычный Применение значения normal заставит браузер использовать поведение системы по умолчанию при разрыве строки. Поэтому для английского и других родственных систем письма разрывы строк будут возникать в пробелах и дефисах, как показано ниже:
.мой-элемент{
перелив: обычный;
}
В приведенном ниже примере в тексте есть слово, которое длиннее своего контейнера. Поскольку нет возможности мягкой упаковки, а значение overflow-wrap свойство normal , слово переполняет свой контейнер. Он описывает поведение системы по умолчанию при разрыве строки:
См. Pen
overflow-wrap-normal Джозефа Мавы (@nibble0101)
на CodePen.
Где угодно Использование значения в любом месте приведет к разрыву неразрывной строки в произвольных точках между двумя символами.
Он не будет вставлять символ дефиса, даже если вы примените дефис свойство того же элемента.
Браузер разобьет слово только в том случае, если отображение слова в строке приведет к переполнению. Если слово все еще переполняется при размещении на своей строке, оно разбивается на точку, где в противном случае произошло бы переполнение. Когда вы используете в любом месте , браузер будет учитывать возможности мягкого переноса, представленные разрывом слова, при вычислении min-content внутренних размеров:
.мой-элемент{
overflow-wrap: везде;
}
В отличие от предыдущего раздела, где мы использовали overflow-wrap: normal , в приведенном ниже примере мы используем overflow-wrap: везде . Переполненное слово, которое в противном случае невозможно разбить, разбивается на фрагменты текста с использованием overflow-wrap: в любом месте , чтобы оно поместилось в свой контейнер:
96875″ data-default-tab=»html,result» data-slug-hash=»eYLWRXY» data-user=»nibble0101″> См. Pen overlow-wrap-anywhere Джозефа Мавы (@nibble0101)
на CodePen.
Самые последние версии настольных браузеров поддерживают overflow-wrap: где угодно . Однако поддержка некоторых мобильных браузеров либо отсутствует, либо неизвестна. На изображении ниже показана поддержка браузера:
Разрывное слово Значение break-word похоже на в любом месте с точки зрения функциональности. Если браузер может обернуть переполненное слово в свою строку без переполнения, это то, что он сделает. Однако, если слово по-прежнему переполняет свой контейнер, даже если оно находится в своей строке, браузер разорвет его в точке, где в противном случае произошло бы переполнение:
.мой-элемент{
overflow-wrap: break-word;
}
В приведенном ниже примере показано, как браузер разбивает выходящий за пределы текст, когда вы применяете overflow-wrap: break-word :
484375″ data-default-tab=»html,result» data-slug-hash=»GRXmvKx» data-user=»nibble0101″> См. Pen overflow-wrap-break-word Джозефа Мавы (@nibble0101)
на CodePen.
Обратите внимание, что текст выглядит так же, как и в последнем подразделе. Разница между overflow-wrap: везде и overflow-wrap: break-word находится в min-content внутренние размеры.
Разница между в любом месте и break-word очевидна при вычислении внутренних размеров min-content . С break-word браузер не учитывает возможности мягкого переноса, представленные break-word при вычислении внутренних размеров min-content , но он учитывает везде . Чтобы узнать больше о внутренних размерах min-content , ознакомьтесь с нашим руководством здесь.
Значение break-word имеет приличный охват среди самых последних версий настольных браузеров.
К сожалению, этого нельзя сказать об их мобильном аналоге. Поэтому безопаснее использовать устаревший перенос слов : break-word вместо более позднего переполнения overflow-wrap: break-word .
На изображении ниже показана поддержка браузером overflow-wrap: break-word :
Последние версии настольных браузеров поддерживаются, а поддержка некоторых мобильных браузеров неизвестна.
Реализация свойства CSS
Word-break Word-break — еще одно свойство CSS, которое можно использовать для указания возможностей мягкого переноса между символами. Вы можете использовать это свойство, чтобы разбить слово именно в том месте, где может произойти переполнение, и перенести его на следующую строку.
Черновая спецификация CSS3 ссылается на свойство CSS word-break следующим образом:
Это свойство указывает возможности мягкого переноса между буквами, т.
е. там, где «нормально» и разрешено разрывать строки текста. Он контролирует, какие типы букв браузер может объединять вместе, чтобы сформировать неразрывные «слова», заставляя символы CJK вести себя как текст, отличный от CJK, или наоборот. Ниже приведены возможные значения CSS-свойства word-break . Как и overflow-wrap , вы можете использовать глобальные значения inherit , initial , revert и unset с word-break , но мы не будем их здесь рассматривать:
разрыв слова: нормальный; слово-разрыв: разбить все; Word-break: сохранить все;
Break-word также является значением свойства CSS word-break , хотя оно было удалено. Однако браузеры по-прежнему поддерживают его по устаревшим причинам. Указание этого свойства имеет тот же эффект, что и word-break: нормальный и overflow-wrap: везде .
Теперь, когда мы знаем CSS-свойство break-word и соответствующие ему значения, давайте рассмотрим их в подразделах ниже.
Более 200 000 разработчиков используют LogRocket для улучшения цифрового взаимодействия
Подробнее →
Настройка
Word-break до Обычный Установка для свойства word-break значения normal применит правила разбиения слов по умолчанию:
.мой-элемент{
разрыв слова: обычный;
}
В приведенном ниже примере показано, что происходит, когда вы применяете стиль word-break: normal к блоку текста, который содержит слово длиннее, чем его контейнер:
См. Pen
word-break-normal Джозефа Мавы (@nibble0101)
на CodePen.
То, что вы видите, является действующими обычными правилами разбиения слов браузера.
Разрушитель
значение Значение break-all вставит разрыв строки именно в том месте, где в противном случае текст переполнился бы для некитайских, неяпонских и некорейских систем письма.
Это не поместит слово в отдельную строку, даже если это предотвратит необходимость вставки разрыва строки:
.мой-элемент{
слово-разрыв: разбить все;
}
В приведенном ниже примере я применяю стиль word-break: break-all к элементу p ширины 9.0011 240px , содержащий переполняющий текст. Браузер вставит разрыв строки в месте, где может произойти переполнение, и перенесет оставшийся текст на следующую строку:
См. Pen
word-break-break-all Джозефа Мавы (@nibble0101)
на CodePen.
Использование break-all разобьет слово между двумя символами именно в том месте, где может произойти переполнение в английском и других родственных языковых системах. Однако он не будет применять такое же поведение к текстам на китайском, японском и корейском языках (CJK).
Это не относится к текстам CJK, потому что системы письма CJK имеют свои собственные правила для применения точек останова.
Произвольное создание разрыва строки между двумя символами только для того, чтобы избежать переполнения, может существенно изменить общий смысл текста. Для систем CJK браузер будет применять разрывы строк в том месте, где такие разрывы разрешены.
Использование значения
Keep-all Если вы используете значение keep-all , браузер не будет применять разрывы слов к текстам CJK, даже если есть переполнение содержимого. Эффект от применения 9Значение 0011 keep-all такое же, как и у normal для систем письма, отличных от CJK:
.мой-элемент{
Word-break: сохранить все;
}
В приведенном ниже примере применение word-break: keep-all будет иметь тот же эффект, что и word-break: normal для системы письма, отличной от CJK, такой как английский:
См. Pen
word-break-keep-all Джозефа Мавы (@nibble0101)
на CodePen.
На изображении ниже показана поддержка браузером слово-разрыв: сохранить все :
Это значение поддерживается большинством популярных настольных браузеров. К сожалению, это не относится к мобильным браузерам. Теперь, когда мы рассмотрели свойства CSS overflow-wrap и word-break , в чем разница между ними? Раздел ниже прольет свет на это.
В чем разница между
overflow-wrap и word-break ? Вы можете использовать свойства CSS overflow-wrap и word-break для управления переполнением содержимого. Однако существуют различия в том, как эти два свойства обрабатывают это.
Использование overflow-wrap перенесет все переполненное слово в свою строку, если оно может поместиться в одну строку, не переполнив контейнер. Браузер разорвет слово только в том случае, если он не может поместить его на новую строку без переполнения. В большинстве случаев свойство overflow-wrap или его устаревшее имя word-wrap может управлять переполнением содержимого.
Использование word-wrap: break-word перенесет переполненное слово на новую строку и разобьет его между двумя символами, если оно все еще переполняет свой контейнер.
Разрыв слова будет безжалостно разрывать переполненное слово между двумя символами, даже если его размещение на строке отменяет необходимость разрыва слова. Некоторые системы письма, такие как системы письма CJK, имеют строгие правила разбиения слов, которые браузер принимает во внимание при создании разрывов строк с помощью 9.0011 разрыв слова .
Как переносить текст с помощью CSS
Как упоминалось выше, если вы хотите переносить текст или разбивать слово, выходящее за пределы его поля, лучше всего использовать свойство CSS overflow-wrap . Вы также можете использовать его устаревшее имя, word-wrap . Попробуйте CSS-свойство word-break , если свойство overflow-wrap вам не подходит. Однако следует помнить о различиях между overflow-wrap и word-break 9.
0012 выделено выше.
Ниже приведена иллюстрация свойств CSS overflow-wrap и word-wrap . Вы можете поиграть с CodePen, чтобы понять их эффекты:
См. текст Pen
с инструкциями по переносу от Джозефа Мавы (@nibble0101)
на CodePen.
Устранение неполадок переполнения содержимого CSS с помощью Chrome DevTools
Чаще всего вам может понадобиться исправить сломанные макеты, вызванные переполнением содержимого, поскольку сложные пользовательские интерфейсы теперь являются обычным явлением в разработке внешнего интерфейса. Современные веб-браузеры поставляются с инструментами для устранения таких проблем с макетом, такими как Chrome DevTools.
Предоставляет возможность выбора элемента в дереве DOM, чтобы вы могли просматривать, добавлять и удалять объявления CSS и многое другое. Это поможет вам отследить оскорбительный стиль CSS в вашем макете и легко исправить его.
Чтобы открыть Chrome DevTools, вы можете использовать клавишу F12 . В открытом состоянии это выглядит так, как показано на изображении ниже. Выбор элемента в дереве DOM отобразит соответствующие ему стили CSS. Вы можете изменить стили и посмотреть, как это повлияет на ваш макет, когда вы отследите источник ошибки:
Как уже упоминалось, если у вас есть свойство white-space для элемента, установите его значение, чтобы разрешить перенос для overflow-wrap: везде или overflow-wrap: break-word для работы.
Установка значения свойства overflow-wrap на в любом месте или break-word в содержимом таблицы не приведет к разрыву переполняющего слова, как в приведенных выше примерах. Таблица переполнит свой контейнер и при необходимости создаст горизонтальную прокрутку. Чтобы таблица поместилась в своем контейнере и overflow-wrap для работы, установите значение свойства table-layout на fixed и установите ширину таблицы на 100% или на некоторое фиксированное значение.
Заключение
Как указывалось в предыдущих разделах, overflow-wrap и word-break во многом похожи, и вы можете использовать их оба для управления переносом строк. Имя overflow-wrap является псевдонимом устаревшего свойства word-wrap . Таким образом, вы можете использовать их взаимозаменяемо. Однако стоит упомянуть, что браузер поддерживает более новую версию 9.0011 свойство overflow-wrap по-прежнему низкое. Вам лучше использовать word-wrap вместо overflow-wrap , если вы хотите почти универсальную поддержку браузера.
Согласно проекту спецификации CSS3, браузеры и пользовательские агенты должны продолжать поддерживать перенос слов по устаревшим причинам. Если вы хотите управлять переполнением содержимого, может быть достаточно overflow-wrap или его устаревшего имени word-wrap . Вы также можете использовать word-break , чтобы разбить слово между двумя символами, если слово выходит за пределы контейнера.
Так же, как overflow-wrap , вам нужно действовать с осторожностью при использовании word-break из-за ограничений в поддержке браузера.
Теперь, когда вы знаете поведение, связанное с двумя свойствами, вы можете решить, где и когда их использовать. Я что-то пропустил? Оставьте комментарий в разделе комментариев. Я буду рад обновить эту статью.
Ваш интерфейс загружает ЦП ваших пользователей?
Поскольку веб-интерфейсы становятся все более сложными, ресурсоемкие функции требуют от браузера все большего и большего. Если вы заинтересованы в мониторинге и отслеживании использования процессора на стороне клиента, использования памяти и многого другого для всех ваших пользователей в рабочей среде, попробуйте LogRocket.https://logrocket.com/signup/
LogRocket похож на DVR для Интернета и мобильных приложений, записывая все, что происходит в вашем веб-приложении, мобильном приложении или на веб-сайте.