Css перенос слов: white-space | htmlbook.ru
white-space | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | ||||
| 6.0+ | 8.0+ | 1.0+ | 4.0+ | 9.5+ | 1.0+ | 3.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ |
Краткая информация
Версии CSS
Описание
Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является тег <pre>, помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу тега <pre>, но в отличие от него не меняет шрифт на моноширинный.
Синтаксис
white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit
Значения
- normal
- Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.
- nowrap
- Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега <br> переносит текст на новую строку.
- pre
- Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.
- pre-line
- В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.
- pre-wrap
- В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку.
- inherit
- Наследует значение родителя.
Действие значений на текст представлено в табл. 1.
| Значение | Перенос текста | Пробелы |
|---|---|---|
| normal | Переносится | Не учитываются |
| nowrap | Не переносится | Не учитываются |
| pre | Не переносится | Учитываются |
| pre-line | Переносится | Не учитываются |
| pre-wrap | Переносится | Учитываются |
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>white-space</title> <style> .example { border: 1px dashed #634f36; /* Параметры рамки */ background: #fffff5; /* Цвет фона */ font-family: "Courier New", Courier, monospace; /* Семейство шрифта */ padding: 7px; /* Поля вокруг текста */ margin: 0 0 1em; /* Отступы */ white-space: pre; /* Учитываются все пробелы и переносы */ } .exampleTitle { border: 1px solid black; /* Параметры рамки */ border-bottom: none; /* Убираем линию снизу */ padding: 3px; /* Поля вокруг текста */ display: inline; /* Отображать как встроенный элемент */ background: #efecdf; /* Цвет фона */ font-weight: bold; /* Жирное начертание */ font-size: 90%; /* Размер шрифта */ margin: 0; /* Убираем отступы */ white-space: nowrap; /* Переносов в тексте нет */ } </style> </head> <body> <p>Пример</p> <p> <html> <body> <b>Великая теорема Ферма</b><br> <i>X <sup><small>n</small></sup> + Y <sup><small>n</small></sup> = Z <sup><small>n</small></sup></i><br> где n - целое число > 2 </body> </html> </p> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства white-space
Объектная модель
[window.]document.getElementById(«elementID»).style.whiteSpace
Браузеры
Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line, pre-wrap и inherit. Для <textarea> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.
Opera до версии 9.5 не поддерживает значение pre-line. Для <textarea> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.
Safari до версии 3.0 и iOS не поддерживают значения pre-wrap и pre-line.
Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap. Для <textarea> значения normal, nowrap, и pre воспринимаются как pre-wrap.
Перенос текста с помощью CSS и HTML
Приветствую вас, дорогие читатели!
Сегодня расскажу про HTML и CSS перенос текста. Очень часто возникает ситуация, когда какой-то текст или слово не помещается в блоке и нужно перенести его на следующую строку.
Перенос текса на следующую строку
Для переноса текста можно использовать специальный html тег <br />. Это одиночный тег, то есть его не нужно закрывать, и ставится он в том месте, где вам нужно осуществить перенос на следующую строку.
Например:
<div> Здесь ну oчень длинный текст, <br /> который не плохо было бы перенести на новую строку. </div>
<div> Здесь ну oчень длинный текст, <br /> который не плохо было бы перенести на новую строку. </div> |
Вот что получим:
Здесь ну oчень длинный текст,
который не плохо было бы перенести на новую строку.
Если вы через CSS задаёте более узкую ширину для блока с текстом то перенос текста осуществляется автоматически. То есть те слова, которые не помещаются в одной строке перескакивают на следующую.
Как сделать CSS перенос слова на следующую строку?
Осуществить перенос слова можно при помощи CSS свойства word-break.
У данного CSS свойства может быть несколько значений:
- Normal – значение по умолчанию, то есть перенос слова не осуществляется и если оно не помещается в блок с текстом, то просто вылезет за его пределы.
Например:Выглядит не очень! Не правда ли ?!
- break-all
Вот что получится:
Здесь ну oооооооооооооооочень длинное слово, которое не плохо было бы перенести на новую строку при помощи CSS.
- inherit – в этом случае наследуется то значение, которое стояла у родительского элемента, то есть у того блока или тега, внутри которого размещён блок с текстом.
Сам HTML кода блока с текстом для переноса в моём случае выглядит вот так:
<div> Здесь ну oооооооооооооооочень длинное слово, которое не плохо было бы перенести на новую строку при помощи CSS. </div>
<div> Здесь ну oооооооооооооооочень длинное слово, которое не плохо было бы перенести на новую строку при помощи CSS. </div> |
А вот CSS код для переноса текста, который записывается в файл стилей вашего шаблона или страницы сайта:
.perenos { border:3px solid #245488; margin:20px auto; padding:10px; width:170px; word-break:break-all; }
.perenos { border:3px solid #245488; margin:20px auto; padding:10px; width:170px;
word-break:break-all; } |
Всё бы ничего, но вот только переносы расставляются без знака «-» в конце строки и не по правилам.
Перенос слов в тексте вручную
Если текста не очень много и критически важно чтобы всё переносилось по правилам, то перенос слов в тексте можно осуществить при помощи специального символа
­
Этот специальный символ ставится в том месте, где нужно осуществить перенос.
Например:
<div> Здесь ну oоооооо­ооооооооочень длинное слово, которое не плохо было бы перенести на новую строку при помощи CSS. </div>
<div> Здесь ну oоооооо­ооооооооочень длинное слово, которое не плохо было бы перенести на новую строку при помощи CSS. </div> |
Выглядеть это будет так:
Здесь ну oооооооооооооооочень длинное слово, которое не плохо было бы перенести на новую строку при помощи CSS.
Перенос слов в тексте при помощи свойства hyphens
Данное CSS свойства сравнительно новое и не очень хорошо поддерживается более старыми версиями браузеров. Однако, несмотря на это, оно наилучшим образом осуществляет перенос слов и текста, так как основывается на встроенном словаре браузера и автоматически проставляет знак «-» в конце строки.
СSS код блока с текстом в этом случае выглядит так:
.perenos-hyphens { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; }
.perenos-hyphens { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; } |
Вот результат его использования данного CSS свойства:
Здесь ну очень длинненькое слово, которое не плохо было бы перенести на новую строку при помощи CSS.
Если на вашем сайте данное CSS свойство не срабатывает, то допишите для тега html атрибут lang=”ru”
В коде это будет выглядеть так:
Как видите перенос текста можно осуществлять несколькими способами как средствами CSS так и HTML.
Надеюсь что данная статья была для вас полезной! Если у вас возникнут какие-то вопросы – пишите их в комментариях. Подписывайтесь на обновления блога и до встречи в следующих статьях!
Всё, что нужно знать об автоматических переносах в CSS / Хабр
Я рассказал о некоторых золотых правилах типографики в интернете, а потом во время секции QA меня спросили о текущей ситуации с автоматическими переносами в вебе. Это хороший вопрос, особенно с учётом того, что немецкий язык знаменит часто используемыми длинными существительными (например, Verbesserungsvorschlag означает «предложение для улучшения»), поэтому переносы широко используются в большинстве письменных носителей.
В вебе автоматические переносы появились в 2011 году и теперь широко поддерживаются. Safari, Firefox и Internet Explorer 9 поддерживают их на всех платформах, а Chrome — на Android и MacOS (пока нет на Windows или Linux).
Автоматические переносы запускаются в два шага. Первый — установить язык для текста. Это сообщит браузеру, какой использовать
словарь. Для корректных переносов нужен словарь переносов, соответствующий языку текста. Если браузер не знает языка текста, то рекомендации CSS говорят не активировать переносы, даже если они включены в таблице стилей.
Переносы — сложная тема. Точки переноса обычно основаны на слогах, использующих сочетание этимологии и фонологии, но есть и другие правила деления слов.
1. Установка языка
Язык веб-страницы устанавливается с помощью атрибута HTML
lang:
<html lang="en">Это лучший способ установки языка для всех веб-страниц, включены там переносы или нет. Установка языка поможет инструментам для автоматического перевода, скринридерам и другим вспомогательным программам.
Атрибут lang="en" применяет языковой тег ISO, сообщая браузеру, что текст на английском языке. В этом случае браузер выберет дефолтный английский словарь переносов, что обычно соответствует переносам и в американском английском. Хотя американский и британский английский заметно отличаются в орфографии и произношении (и, следовательно, переносах), но разница не такая существенная, как между вариантами португальского. Проблема решается добавлением «региона», чтобы браузер знал, какой вариант английского наиболее подходит в качестве словаря переносов. Например, чтобы указать бразильский португальский или британский английский:
<html lang="pt-BR">
<html lang="en-GB">2. Включение переносов
После установки языка можно включить автоматические переносы в CSS. Это исключительно просто:
hyphens: auto;В настоящее время Safari и IE/Edge требуют префиксов, поэтому прямо сейчас следует написать так:
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;Но недостаточно просто включить функцию в CSS. В спецификациях
CSS Text Module Level 4появилась возможность управлять переносами, как в программах для вёрстки (например, InDesign) и некоторых текстовых редакторах (включая Word). Эти элементы управления позволяют разными способами установить количество переносов в тексте.
Ограничение длины слова и количества символов до и после переноса
Если переносить короткие слова, их труднее читать. Точно так же вы не хотите отрывать от слова маленький кусочек. Общепринятое эмпирическое правило состоит в том, чтобы переносить только слова длиной не менее шести букв, оставляя не менее трёх символов до переноса и не менее двух на следующей строке.
В Оксфордском руководстве по стилю рекомендуется минимум три буквы после переноса, хотя допустимы редкие исключения.
Эти ограничения задаются с помощью свойства
hyphenate-limit-chars. Оно принимает три значения, разделённые пробелами. Это минимальное ограничение символов для всего слова, минимальное количество символов до и после переноса. Чтобы соответствовать вышеупомянуторму эмпирическому правилу, указываем 6, 3 и 2, соответственно:
hyphenate-limit-chars: 6 3 2;hyphenate-limit-chars в действии
По умолчанию для всех трёх параметров установлено значение auto. Это означает, что браузер выберет лучшие настройки на основе текущего языка и макета. CSS Text Module Level 4 предполагает использование в качестве отправной точки 5 2 2 (на мой взгляд, это приводит к излишним переносам), но браузеры могут изменять параметры на своё усмотрение.
В настоящее время это свойство поддерживает только IE/Edge (с префиксом), а Safari ограничивает количество символов через устаревшее свойство из предыдущего черновика CSS3 Text Module. Это означает, что вы можете добиться одинакового эффекта в Edge и Safari (с перспективным планированием для Firefox) с помощью такого кода:
/* legacy properties */
-webkit-hyphenate-limit-before: 3;
-webkit-hyphenate-limit-after: 2;
/* current proposal */
-moz-hyphenate-limit-chars: 6 3 2; /* not yet supported */
-webkit-hyphenate-limit-chars: 6 3 2; /* not yet supported */
-ms-hyphenate-limit-chars: 6 3 2;
hyphenate-limit-chars: 6 3 2;Ограничение числа последовательных переносов
По эстетическим соображениям можно ограничить количество строк подряд с переносами. Последовательные чёрточки дефисов (три или более), уничижительно называются
лесенкой. Общее эмпирическое правило для английского языка заключается в том, что две строки подряд —идеальный максимум (хотя в немецком лесенки более длинные). По умолчанию CSS не ограничивает количество последовательных дефисов, но можно установить максимальное их количество в свойстве
hyphenate-limit-lines. В настоящее время это поддерживается только IE/Edge и Safari (с префиксами).
-ms-hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-lines: 2;
hyphenate-limit-lines: 2;Свойство hyphenate-limit-lines предотвращает лесенку
Можете снять ограничение с помощью no-limit.
Запрет переносов в последней строке абзаца
По умолчанию браузер спокойно переносит самое последнее слово абзаца, так что окончание слова сидит в последней строке, как одинокая сирота. Зачастую предпочтительнее большой пробел в конце предпоследней строки, чем полслова в последней строке. Это устанавливается свойством
hyphenate-limit-lastсо значением
always.
hyphenate-limit-last: always;В настоящее время свойство поддерживается только в IE/Edge (с префиксом).
Уменьшение количества дефисов путём установки зоны переноса
По умолчанию перенос происходит максимально часто, в пределах установленных значений
hyphenate-limit-charsи
hyphenate-limit-lines. Но даже с этими ограничениями возможно чрезмерное насыщение абзацев дефисами.
Рассмотрим абзац, выровненный по левому краю. Правый край неровный, что частично исправляется переносами. По умолчанию будут переноситься все слова, которые разрешено переносить, что обеспечивает максимальное выравнивание правого края. Если вы готовы смириться с небольшим нарушением выравнивания, можно уменьшить количество переносов.
Для этого нужно указать максимальное допустимое количество пробелов между последним словом строки и краем текстового поля. Если в данном пространстве начинается новое слово, оно не переносится. Это пространство известно как зона переноса. Чем больше зона переноса, тем сильнее неровность и тем меньше переносов. Регулируя зону, вы ищете оптимальное соотношение между количеством дефисов и заполнением строки.
Слева: стрелки указывают строки, где перенос разрешён. Справа: перенос с заданной зоной переноса
Для этого используется свойство hyphenation-limit-zone, где указывается размер в пикселях или процентах (относительно ширины текстового поля). В контексте адаптивного дизайна имеет смысл установить зону переноса в процентах. Это означает, что зона переноса станет меньше на экранах меньшего размера, что вызовет больше переносов и меньше незаполненных строк. И наоборот, на более широких экранах зона переноса расширится, следовательно, будет меньше переносов и больше оборванных строк, которые на широких экранах не так критичны. Основываясь на типичных значениях в программах для вёрстки, можно начать с 8%.
hyphenate-limit-zone: 8%В настоящее время поддерживается только в IE/Edge (с префиксом).
Всё вместе
С помощью свойств CSS Text Module Level 4 установим для абзаца те же параметры управления переносами, как в обычных программах для вёрстки:
p {
hyphens: auto;
hyphenate-limit-chars: 6 3 3;
hyphenate-limit-lines: 2;
hyphenate-limit-last: always;
hyphenate-limit-zone: 8%;
}C соответствующими префиксами и откатами код выглядит так:
p {
-webkit-hyphens: auto;
-webkit-hyphenate-limit-before: 3;
-webkit-hyphenate-limit-after: 3;
-webkit-hyphenate-limit-chars: 6 3 3;
-webkit-hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-last: always;
-webkit-hyphenate-limit-zone: 8%;
-moz-hyphens: auto;
-moz-hyphenate-limit-chars: 6 3 3;
-moz-hyphenate-limit-lines: 2;
-moz-hyphenate-limit-last: always;
-moz-hyphenate-limit-zone: 8%;
-ms-hyphens: auto;
-ms-hyphenate-limit-chars: 6 3 3;
-ms-hyphenate-limit-lines: 2;
-ms-hyphenate-limit-last: always;
-ms-hyphenate-limit-zone: 8%;
hyphens: auto;
hyphenate-limit-chars: 6 3 3;
hyphenate-limit-lines: 2;
hyphenate-limit-last: always;
hyphenate-limit-zone: 8%;
}Перенос — идеальный пример прогрессивного улучшения. Эти свойства можно активировать уже сейчас, если вы считаете, что читатели выиграют от этого. Поддержка браузеров постепенно увеличится. Если вы разрабатываете сайт на языке с длинными словами, как немецкий, читатели точно будут благодарны.
Свойство overflow-wrap- перенос длинного слова на новую строку
Свойство overflow-wrap позволяет перенести буквы длинного слова на новую строку, если это слово не влазит в ширину контейнера.
Синтаксис
селектор {
overflow-wrap: break-word | normal;
}
Значения
| Значение | Описание |
|---|---|
| break-word | Заставляет длинные слова переносится на новую строку, если это слово не помещается в контейнер. При этом слово начнется с новой строки. |
| normal | Стандартное поведение: если длинное слово не влазит по ширине в контейнер — оно просто вылезет за его границу (при этом начнется с новой строки). |
Значение по умолчанию: normal.
Пример . Значение normal
В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы (при этом начнется с новой строки):
<div>
Lorem ipsum dolor sit amet
оооооооооооооооооооооооооооооченьдлинноеслово,
consectetur adipiscing elit.
</div> #elem {
word-wrap: normal;
overflow-wrap: normal;
border: 1px solid red;
width: 200px;
}
:
Пример . Значение break-word
А теперь те буквы, которые не помещались, просто перенесутся на следующую строку (при этом длинное слово все равно будет начинаться с новой строки):
<div>
Lorem ipsum dolor sit amet
оооооооооооооооооооооооооооооченьдлинноеслово,
consectetur adipiscing elit.
</div> #elem {
overflow-wrap: break-word;
border: 1px solid red;
width: 200px;
}
:
Смотрите также
- свойство word-break,
которое также позволяет перенести буквы длинного слова на новую строку - свойство word-wrap,
которое является устаревшим названием свойства overflow-wrap - свойство hyphens,
которое включает переносы слов по слогам - тег wbr,
который реализует мягкие переносы средствами HTML - тег br,
с помощью которого можно принудительно заставить перенести текст на новую строку
Переносы слов в HTML / Тяпк
Суровое настроящее. CSS cвойство word-break
Автоматический топорный перенос слов (без добавление дефисов).
Интересуемые значения свойства:
- break-all
Автоматический перенос всех слов, текст выглядик как выровненный по ширине. - break-word (используется на этом сайте в заголовках)
Перенос отдельных слов, которые не поместилось в заданную ширину блока.
Светлое будущее. СSS cвойство hyphens
Правила переносов определяются словарём встроенным в браузер. Свойство работает при наличии атрибута lang с кодом языка на уровне всего документа или отдельных его частей.
Интересуемые значения:
- manual (используется по умолчанию)
Слова переносятся только в тех местах текста, где добавлен спецсимвол­(мягкий перенос) или тег<wbr>. Спецсимволы вручную расставляются в тексте, не видны в обычном тексте и если слово не помещается, браузер в месте нахождения спецсимвола создаёт перенос. Спецсимвол­при переносе слова добавлять дефис (как учили в школе), а тегнет. - auto
Браузер добавляет переносы автоматически на основе встроенного словаря. До сих пор слабая поддержка браузерами, в хроме не работает(.
<html lang="en">
...
</html>
<p lang="ru">
Програм<wbr>миирование — процесс и искусство создания компьютерных программ
с помощью языков програм­мирования.
</p>p {
hyphens: auto;
}Запрет переносов
Существует обратная задача — запретить переносы. Например, не отделять инициалы от фамилии или единицы измерения от значений (100 кг). Чтобы браузер не добавлял переносы, следует вместо обычного пробела написать неразрывный пробел  
Также у CSS свойства hyphens существует значеие none, когда слова не переносятся, даже при наличии в тексте мягких переносов.
перенос слов очень длинные строки
Как вы можете отобразить длинную строку, адрес веб-сайта, слово или набор символов с автоматическими разрывами строк, чтобы сохранить ширину div? Наверное, что-то вроде словесной обертки. Обычно добавление пробела работает, но есть ли решение CSS, такое как перенос слов?
Например, он (очень неприятно) перекрывает дивы, заставляет горизонтальную прокрутку и т. д. wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
Что я могу добавить к приведенной выше строке, чтобы она аккуратно поместилась в несколько строк в div или в окне браузера?
css string long-integer word-wrapПоделиться Источник Peter Craig 13 мая 2009 в 06:05
10 ответов
- Как я могу переключить перенос слов в Visual Studio?
Есть ли у Visual Studio .NET способ включать и выключать перенос слов? Я привык к этой функции в Eclipse, которая позволяет вам щелкать правой кнопкой мыши и включать и выключать перенос слов, так что, когда у вас длинные строки, которые простираются вправо, вам не нужно перемещать нижнюю полосу…
- Самый простой способ создать перенос слов из строки в swift
Каков самый простой способ создать перенос слов в Swift из строки? Допустим, у меня есть строка из 150 символов, и я хочу начать новую строку каждые 50 символов. Ваши мысли очень ценятся.
87
Этот вопрос уже задавался здесь раньше:
Короче говоря:
Что касается решений CSS, у вас есть: overflow: scroll; , чтобы заставить элемент показывать полосы прокрутки, и overflow:hidden; , чтобы просто отрезать любой дополнительный текст. Есть text-overflow:ellipsis; и word-wrap: break-word; , но они только IE ( break-word находится в проекте CSS3, однако, так что это будет решением этой проблемы через 5 лет).
Суть в том, что если для вас очень важно предотвратить это с переносом текста на следующую строку, единственным разумным решением является введение ­ (мягкий дефис), <wbr> (тег разрыва слова) или ​ (пробел нулевой ширины, тот же эффект, что и ­ минус дефис) на стороне сервера строк. Однако, если вы не возражаете против Javascript, есть дефис , который кажется довольно солидным.
Поделиться Paolo Bergantino 13 мая 2009 в 06:09
31
word-wrap: break-word; доступен в браузерах с поддержкой IE7+, FF 3.5 и Webkit (Safari/Chrome и т. Д.). Для обработки IE6 вам также нужно будет объявить word-wrap: break-all;
Если FF 2.0 нет в матрице вашего браузера, то их использование является жизнеспособным решением. К сожалению, он не переносит предыдущую строку, где слово сломано, что является типографским кошмаром. Я бы предложил использовать дефис, как предложил Паоло, который является ненавязчивым JavaScript. Резервным вариантом для пользователей, не включенных в JavaScript, будет сломанное слово без дефисов. Я могу жить с этим какое-то время. Эта проблема, скорее всего, возникнет в CMS, где веб-дизайнер не имеет контроля над тем, какой контент будет вводиться или где могут быть реализованы разрывы строк и мягкие дефисы.
Я взглянул на спецификацию W3 , где обсуждается перенос в CSS3. К сожалению, похоже, что есть несколько предложений, но пока ничего конкретного. Похоже, что поставщики браузеров еще ничего не реализовали. Я проверил как Mozilla, так и Webkit на наличие кода владельца, но никаких признаков этого нет.
Поделиться Kevin Rapley 15 декабря 2009 в 07:28
28
word-break:break-all работает лакомство
Поделиться Sam Jones 19 июля 2013 в 15:47
- Контекстно-зависимый перенос слов в vi/vim
Как я могу конкретизировать перенос слов для конкретных тегов. Например, в LaTex я хочу переносить слова для моих абзацев, но не для моих фигурных команд (они всегда очень длинные и бегут за пределы экрана). Или с Javascript, я хочу, чтобы правое поле для кода было, например, 50 столбцов, но для…
- Перенос слов в Eclipse Java?
У меня уже есть перенос слов для Eclipse PHP ( как я могу заставить перенос слов работать в файлах Eclipse PDT для PHP? ). а как насчет Eclipse Java? Существует ли аналогичный инструмент для обертывания строк кода Java?
11
Только что упомянул об этом здесь , но, вероятно, более уместно для этого вопроса. Лучшим свойством в ближайшее время будет переполнение. и лучшее значение, если оно будет реализовано, будет:
* {
overflow-wrap:hyphenate.
}
На момент написания статьи iphone или firefox, похоже, еще не было никакой поддержки, а overflow-wrap:hyphenate даже нет в рабочем проекте.
в то же время я бы использовал:
p {
word-wrap: break-word;
-moz-hyphens:auto;
-webkit-hyphens:auto;
-o-hyphens:auto;
hyphens:auto;
}
Поделиться adriatiq 27 апреля 2012 в 02:37
3
display: block; overflow: hidden; text-overflow: ellipsis; width: 200px; // or whatever is best for you
Поделиться jamiethepiper 25 марта 2013 в 16:06
3
Я использую код для предотвращения всех длинных строк, URL-адресов и так далее..
-ms-word-break: break-all;
/* Be VERY careful with this, breaks normal words wh_erever */
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
Поделиться Roman Losev 14 февраля 2014 в 07:21
Поделиться Chad Birch 13 мая 2009 в 06:19
1
Обычно клетки делают это естественным образом, но вы можете заставить это поведение на div с помощью:
div {
width: 950px;
word-wrap: break-word;
display: table-cell;
}
Поделиться nikc 02 января 2013 в 01:55
0
Всегда указывайте свойство высоты строки-если вы его не укажете, это может привести к сбою вашего свойства word-break: break-all; .
Поделиться Shraddha Mohite 20 ноября 2014 в 11:16
0
Похоже, что это делает трюк для последней версии Chrome:
[the element],
[the element] * {
word-wrap: break-word;
white-space: pre;
}
Я не проверял ни один браузер, кроме Chrome.
Поделиться SDMulroy 01 декабря 2014 в 16:46
Похожие вопросы:
UITextView перенос символов, но не перенос слов
У меня есть UITextView, на котором я хотел бы отключить перенос слов, но оставить перенос символов включенным. В принципе, я хотел бы иметь длинную строку 200+ символов, которая все еще обертывается…
Перенос слов в gedit
Я использую gedit & у меня очень огромная строка, и я не могу видеть эту полную строку, потому что gedit застревает. Итак, я хотел сделать перенос слов в gedit. Я искал, но не нашел опции…
Div переполняется не делая отдельной строки
Возможный Дубликат : перенос слов очень длинные строки Мой код <div style=width:40px;>adfdddddddddddddddddddd</div> Этот код должен составлять 4 строки, но он отображает вывод в одной…
Как я могу переключить перенос слов в Visual Studio?
Есть ли у Visual Studio .NET способ включать и выключать перенос слов? Я привык к этой функции в Eclipse, которая позволяет вам щелкать правой кнопкой мыши и включать и выключать перенос слов, так…
Самый простой способ создать перенос слов из строки в swift
Каков самый простой способ создать перенос слов в Swift из строки? Допустим, у меня есть строка из 150 символов, и я хочу начать новую строку каждые 50 символов. Ваши мысли очень ценятся.
Контекстно-зависимый перенос слов в vi/vim
Как я могу конкретизировать перенос слов для конкретных тегов. Например, в LaTex я хочу переносить слова для моих абзацев, но не для моих фигурных команд (они всегда очень длинные и бегут за пределы…
Перенос слов в Eclipse Java?
У меня уже есть перенос слов для Eclipse PHP ( как я могу заставить перенос слов работать в файлах Eclipse PDT для PHP? ). а как насчет Eclipse Java? Существует ли аналогичный инструмент для…
Перенос слов в JasperReport с тегом html
Я пытаюсь разработать отчет с некоторым текстом, но у меня есть одно текстовое поле problem…In, которое я написал I text и использую тег <br> </br> . Если бы я написал один текст с…
Визуальный перенос слов или перенос слов в файле
Я использую sublime для автоматического переноса слов python кодовых строк, которые выходят за рамки 79 символов, как определяет Pep-8. Изначально я делал возврат, чтобы не выходить за пределы…
UILabel неправильный перенос слов в iOS 11
У меня есть проблема с приложением, использующим XIBs без autolayout. Не знаю, важна ли эта информация. У меня есть UILabel с 2 строками, использующими перенос слов. В iOS 10 перенос слов работал…
Как отключить перенос слов в HTML?
Я чувствую себя глупо из-за того, что не могу понять этого, но как мне отключить wordwrap? свойство css word-wrap может быть принудительно включено с помощью break-word, но не может быть принудительно отключено (только может быть оставлено наедине со значением normal ).
Как мне заставить слово обернуться ?
html css word-wrapПоделиться Источник Alexander Bird 10 января 2011 в 23:19
4 ответа
- Emacs-отключить перенос слов в html-режиме
В моем emacs html-режиме перенос слов происходит, если пересечь легендарный предел в 80 столбцов. Как я могу его отключить?
- Отключить перенос слов в JTextPane
Я не могу найти простой способ отключить перенос слов в JTextPane. Я не могу использовать JTextArea, потому что мне нужны разные цвета для разных текстов. У меня есть эти большие уродливые линии, которые становятся еще уродливее с включенным переносом слов. У JTextArea есть метод setLineWrap(), но…
893
Вам нужно использовать атрибут CSS white-space.
В частности, white-space: nowrap и white-space: pre являются наиболее часто используемыми значениями. Первый, кажется, то, что вам нужно.
Поделиться Jon 10 января 2011 в 23:21
27
Добавлено webkit конкретных значений, отсутствующих выше
white-space: -moz-pre-wrap; /* Firefox */
white-space: -o-pre-wrap; /* Opera */
white-space: pre-wrap; /* Chrome */
word-wrap: break-word; /* IE */
Поделиться Matas Vaitkevicius 07 июля 2015 в 15:07
7
Интересно, почему вы находите в качестве решения «white-space» с «nowrap» или «pre», это не делает правильного поведения: вы заставляете свой текст в одной строке! Текст должен прерывать строки, но не прерывать слова по умолчанию. Это вызвано некоторыми атрибутами css: перенос слов, перенос переполнения, разрыв слов и дефисы. Так что вы можете иметь либо:
word-break: break-all;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
Поэтому решение состоит в том, чтобы удалить их или переопределить их с помощью «unset» или «normal»:
word-break: unset;
word-wrap: unset;
overflow-wrap: unset;
-webkit-hyphens: unset;
-moz-hyphens: unset;
-ms-hyphens: unset;
hyphens: unset;
UPDATE: я также предоставляю доказательство с JSfiddle: https://jsfiddle.net/azozp8rr/
Поделиться zod 12 мая 2018 в 09:55
- Как отключить перенос слов в iTerm2?
Как отключить перенос слов в iTerm2? Есть ли конкретная команда для этого или в настройках? Я пытаюсь избежать того, чтобы текст перешел на следующую строку. Я бы предпочел прокручивать из стороны в сторону.
- Как отключить перенос слов NSTextView?
NSTextView по умолчанию выполняет перенос слов. Как я могу отключить это? Я делаю просмотрщик кода JSON, поэтому мне нужно отключить его.
3
Это сработало для меня, чтобы остановить глупые перерывы в работе в текстовых областях Chrome
word-break: keep-all;
Поделиться Ryan Charmley 02 октября 2019 в 21:54
Похожие вопросы:
Как отключить перенос слов в Android Multiline TextView?
Возможный Дубликат : Отключить перенос слов в многострочном Android TextView У меня есть вопрос о Android TextView. Можно ли отключить перенос слов в многострочном TextView? Я хочу использовать…
Отключить перенос слов в firebug
Когда я разворачиваю слишком много узлов, а положение узла находится слишком близко к правой боковой панели, поэтому ему не хватает места, вместо того чтобы полоса прокрутки стала меньше (чтобы я…
UITextView перенос символов, но не перенос слов
У меня есть UITextView, на котором я хотел бы отключить перенос слов, но оставить перенос символов включенным. В принципе, я хотел бы иметь длинную строку 200+ символов, которая все еще обертывается…
Emacs-отключить перенос слов в html-режиме
В моем emacs html-режиме перенос слов происходит, если пересечь легендарный предел в 80 столбцов. Как я могу его отключить?
Отключить перенос слов в JTextPane
Я не могу найти простой способ отключить перенос слов в JTextPane. Я не могу использовать JTextArea, потому что мне нужны разные цвета для разных текстов. У меня есть эти большие уродливые линии,…
Как отключить перенос слов в iTerm2?
Как отключить перенос слов в iTerm2? Есть ли конкретная команда для этого или в настройках? Я пытаюсь избежать того, чтобы текст перешел на следующую строку. Я бы предпочел прокручивать из стороны в…
Как отключить перенос слов NSTextView?
NSTextView по умолчанию выполняет перенос слов. Как я могу отключить это? Я делаю просмотрщик кода JSON, поэтому мне нужно отключить его.
Как отключить перенос слов в JEditorPane?
Мой JEditorPane автоматически обертывает слова; я не хочу этого. Все, что я хочу, — это чтобы появилась горизонтальная полоса, которая позволяет пользователю писать столько, сколько он хочет. Как я…
Как отключить перенос слов в Редакторе Xcode 4?
Я не могу найти, Как отключить перенос слов в Редакторе Xcode 4. Как я могу это сделать?
Отключить перенос слов в VS-коде
У меня есть следующие настройки в коде VS, чтобы отключить перенос слов editor.wordWrap: off, editor.wordWrapColumn: -1 Перенос слов по-прежнему не выключен. Это делает VS Code действительно…
html — разница между переносом через переполнение и разрывом слова?
Вот точные различия: (на основе тестирования в Chrome v81 и подтверждения моих наблюдений ссылкой на спецификацию)
белое пространство
нормальный (по умолчанию): сворачивает цепочки пробелов и разрывы строк; добавляет разрывы строк там, где это необходимо.
nowrap : сворачивает цепочки пробелов и разрывы строк; не добавляет разрывы строк
перед строкой : сворачивает цепочки пробелов; добавляет разрывы строк там, где это необходимо.
pre-wrap : без сворачивания; добавляет разрывы строк там, где это необходимо.
пробелы разрыва : то же, что и до переноса, за исключением того, что пробелы могут запускать добавление разрыва строки
до : без сворачивания; не добавляет перенос строки
Примечание. Если в выбранных списках значений с пробелами «не добавляются разрывы строк», то поведение разрыва строки следующих свойств не может быть применено (т. Е.игнорируется).
разрыв слова
нормальный (по умолчанию): разрывает строку в конце последнего слова, подходящего в контейнере [если он существует], иначе строка остается неразрывной
break-word : прерывает строку в конце последнего слова, подходящего в контейнере [если таковое существует] , иначе в конце контейнера
break-all : разрывает строку в конце контейнера [можно разделить слово, даже с соседним пробелом]
overflow-wrap (унаследованное название: word-wrap)
нормальный (по умолчанию): разрывает строку в конце последнего слова, подходящего в контейнере [если он существует], иначе строка остается неразрывной
break-word : прерывает строку в конце последнего слова, подходящего в контейнере [если таковое существует] , иначе в конце контейнера [в негибком контейнере], в противном случае строка осталась неразрывной
в любом месте : разрыв строки в конце последнего слова, подходящего в контейнере [если он существует], в противном случае в конце контейнера [так же, как word-break: break-word ]
Обратите внимание, что для overflow-wrap: break-word (как и для любой комбинации, которая оставляет строки слишком длинными для контейнера), непрерывная линия может привести к расширению гибкого контейнера сверх указанного коэффициента гибкости (вынуждая другие гибкие контейнеры сжиматься чтобы учесть слишком длинный контент).
CSS | Свойство word-wrap — GeeksforGeeks
Свойство word-wrap в CSS используется для разрыва длинного слова и переноса на следующую строку. Он определяет, следует ли разбивать слова, когда содержимое выходит за границы своего контейнера.
Синтаксис:
перенос слов: нормальный | прерывание | начальное | наследование;
Значение свойства:
- нормальный: Это значение по умолчанию, строки могут быть разорваны только в обычных точках разрыва (пробелы, не буквенно-цифровые символы и т. Д.).
Синтаксис:
перенос слов: нормальный;
Пример:
<html><09 9900 <название>свойство переноса словназвание>стиль>div {перенос слов: нормальный;ширина: 150 пикселей;граница: сплошной черный цвет 1px;}стиль>головка>109><div>GeeksforGeeks: AComputerSciencePortalForGeeks000000body>html>Вывод:
- слово прерывания : слова, которые произвольно превышают ширину контейнера сломан, чтобы соответствовать в пределах контейнера.
Синтаксис:
перенос слов: слово-разрыв;
Пример:
<html><9009900титул>свойство переноса словтитул><0009> стиль> стильdiv {word-wrap: break-word;ширина: 150 пикселей;граница: сплошной черный цвет 1px;}стиль>головка>109><div>GeeksforGeeks: AComputerSciencePortalForGeeks000000тело>html> - начальное: Используется для установки значения по умолчанию для свойства переноса слов.
- наследовать: Это свойство наследуется от своего родителя.
Поддерживаемые браузеры: Браузеры, поддерживаемые свойством с переносом слов , перечислены ниже:
- Google Chrome 4.0
- Internet Explore 5.5
- Firefox 3.5
- Safari 3.1
- Opera 10.5
Как перенести текст на новую строку в CSS
Большие участки текста нарушают стиль или макет вашего веб-сайта? Вот как обернуть текст CSS.
Длинные тексты могут казаться неконтролируемыми во время веб-дизайна. Но они тоже могут быть неизбежными, и иногда они в конечном итоге пересекают границы. Это может создать неплотную объектную модель документа (DOM) с ненужным переполнением, что неудобно для пользователя.
Но вот и хорошие новости: вы можете справиться с такими длинными текстами, перенеся их на новую строку с помощью CSS. Здесь мы покажем вам, как обернуть длинные непрерывные тексты с помощью CSS.
Как работает обтекание текстом CSS
CSS обрабатывает растянутые длинные слова, используя встроенное свойство word-wrap или overflow-wrap .
Однако, когда они не контролируются, браузеры по умолчанию обрабатывают такие длинные тексты. Они не будут переносить длинные слова, пока не получат указание сделать это.
Связано: что вам нужно знать о DOM
Два основных свойства CSS, упомянутых ранее, работают одинаково, и вы можете использовать их взаимозаменяемо.Однако они принимают четыре значения или синтаксиса:
- break-word : это фактический синтаксис CSS, который сообщает браузеру перенести длинный текст на новую строку.
- нормальный : он разбивает каждое слово в нормальных точках разделения в DOM. Не действует на длинные струны.
- начальный : это способ обработки строк браузером по умолчанию.Как и обычный синтаксис , он не разбивает длинные слова.
- наследовать : указывает дочернему элементу наследовать свойство своего родителя. Но он по-прежнему не работает с длинными текстами, за исключением того, что вы применяете контрольное слово к родительскому элементу.
Как обернуть длинные слова с помощью CSS Word Wrap
Перенос слов в новую строку с помощью CSS легко и не требует громоздких настроек CSS для работы.
Например, длинный текст h3 в текстовом контейнере на образце изображения ниже пересекает границу:
Давайте посмотрим, как мы можем перенести его на следующую строку, используя свойство word-wrap CSS:
HTML :
This-div-contains-the-long-h3-lorem-text-shown-in the image above
CSS :
.wrap-it {
word-wrap: break-word; перенос слов;
}
После обертывания длинного текста h3 в образце изображения вот результат:
Вот и все! Теперь вы знаете, как перенести слова на новую строку в вашей модели DOM с помощью CSS.
Связанный: Как настроить таргетинг на часть веб-страницы с помощью селекторов CSS
Однако, как указывалось ранее, word-wrap и overflow-wrap работают одинаково и принимают аналогичные свойства.
Чтобы вместо этого использовать overflow-wrap , просто замените им word-wrap .
На веб-странице важно переносить слова
Обертывание текстов не только добавляет эстетики вашей веб-странице, но и сжимает DOM. Даже если вы контролируете, что входит в ваш раздел контента, пользователи могут публиковать ссылки или другие слова, которые не вписываются в ваш текстовый контейнер или всю вашу DOM.
Следовательно, применение переноса текста к такому разделу необходимо для сохранения целостности модели DOM.
Как использовать медиа-запросы в HTML и CSS для создания адаптивных веб-сайтов Хотите, чтобы ваш сайт выглядел потрясающе на мобильных устройствах? Пришло время узнать, как использовать медиа-запросы в CSS.
Читать далее
Об авторе Идову Омисола
(Опубликовано 89 статей) Idowu увлечен всем, что связано с умными технологиями и производительностью.В свободное время он играет с кодированием и переключается на шахматную доску, когда ему скучно, но он также любит время от времени отвлекаться от рутины. Его страсть показывать людям современные технологии побуждает его писать больше.
Более
От Идову Омисола Подпишитесь на нашу рассылку новостей
Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!
Нажмите здесь, чтобы подписаться
слов | Codrops
Свойство word-wrap используется, чтобы указать, могут ли строки разрываться внутри слов, которые настолько длинные, что они переполняют свой контейнер и которые в противном случае не могут быть разбиты по умолчанию.
Чем оно отличается от свойства разбиения по словам ? Что ж, свойство word-break разбивает строку между двумя символами слова, которое находится в конце этой строки, чтобы вся строка помещалась внутри своего контейнера. Но свойство word-wrap , с другой стороны, разбивает слово, когда само слово занимает всю строку и выходит за пределы этой строки; то есть, когда само слово слишком длинное, чтобы оно вышло за пределы своего контейнера, поэтому мы заставляем его обертывать только строку, которую строка будет переносить, чтобы поместиться внутри своего контейнера.
Свойство word-wrap действует только тогда, когда white-space разрешает перенос.
Свойство word-wrap называется overflow-wrap в спецификации CSS Text Level 3 (которая все еще является рабочим проектом, поэтому все может измениться).
Общая информация и примечания
Два свойства ( word-break и word-wrap ) различаются правилами и переполнением слов: как упоминалось ранее, word-wrap используется для разрыва слов, которые переполняют их контейнер, а свойство word-break разбивает всех слов в конце строки, даже те, которые обычно переносятся на другую строку и не переполняют свой контейнер.
В точке разрыва слова не вставляется символ переноса. По этой причине было бы разумнее использовать это свойство вместе со свойством дефисов .
Значения
- нормальный
- строки могут разрываться только в обычных точках разрыва слова.
- слово прерывания
- обычно неразрывные слова могут быть разорваны в произвольных точках, если в строке нет других приемлемых точек разрыва.
Примеры
Следующая строка разбивает все слова (внутри абзацев), которые слишком длинные и обычно переполняют свой контейнер.
п {
перенос слов: слово-разрыв;
}
Поддержка браузера
* обозначает обязательный префикс.
- Поддерживается:
- Да
- Нет
- Частично
- Полифилл
Статистика caniuse.com
Автор Сара Суейдан. Последнее обновление: 11 декабря 2016 г., 22:55, автор: Мэри Лу.
У вас есть предложение, вопрос или вы хотите внести свой вклад? Отправить вопрос.
Перенос длинных слов с помощью CSS или HTML - Крис Сид, CJCid
Когда слово длиннее ширины контейнера, появляется горизонтальная прокрутка на уровне страницы. Есть 3 различных способа решить эту проблему и избежать неожиданных горизонтальных прокруток.
Ленивый способ: прокрутка внутри контейнера
Самый простой способ - добавить в CSS необязательную горизонтальную прокрутку контейнера.
Код CSS для горизонтальной прокрутки
.container-name {
переполнение-x: авто;
}
Демо для горизонтальной прокрутки
С точки зрения удобства использования и доступности перспективы горизонтальная прокрутка - на уровне страницы или внутри контейнеров - - это не рекомендуется. В редких случаях горизонтальная прокрутка может быть приемлемым решением; но это сильно зависит от типа контента.
Как правило, контент должен быть разборчивым, если всегда должен быть видимым без необходимости с ним взаимодействовать.
Кроме того, горизонтальная прокрутка на контейнерах может вызвать проблем взаимодействия , которые повлияют на удобство использования . Современные браузеры назначили действия по взаимодействию с горизонтальной прокруткой, например: пролистывание / прокрутка слева направо, переход на предыдущую страницу.
Жестко запрограммированный способ: разметка
Есть 2 разных способа разбить слова, изменив структуру разметки:
- Использование элемента
- Использование «мягкого переноса»
& shy; символ юникода
Элемент
Элемент разбивает слово в той позиции, которая вставляется только , когда содержимое не помещается в контейнер, без , показывая какой-либо дополнительный символ.Фактически, элемент никогда не отображается в любом случае, и ведет себя очень похоже с символом юникода «пробел нулевой ширины» ( & # 8203; ).
HTML-код для
Lorem ipsum dolor sit amet
Демо для
Элемент полезен в некоторых случаях, например, для языков CJK (китайский, японский и корейский), когда нам нужно контролировать и вводить необязательный разрыв слова / строки, в то время как мы запрещаем разрывы строк в любой другой части текста.
Мягкий дефис
& застенчивый; Символ прерывает слово , а отображает символ дефиса, - только , когда содержимое не помещается в контейнер.
HTML-код для мягкого переноса
Lorem & shy; ipsum & shy; dolor & shy; sit & shy; amet
Демо для мягкого переноса
В то время как & shy; Символ является полезным решением для большинства западных языков , это не очень полезное решение для языков CJK, поскольку символ дефиса не существует в качестве параметра разбиения на слова.
С другой стороны, современных браузеров имеют возможность расстановки переносов с помощью свойства дефисов CSS, но это свойство работает только для поддерживаемых языков. Например, Firefox не поддерживает греческий язык для расстановки переносов - , в то время как Safari поддерживает греческий язык . С & shy; символов, мы можем имитировать текст с переносом даже для неподдерживаемых языков и во всех браузерах.
Оптимальный способ: CSS
Есть 4 свойства CSS, которые могут помочь справиться с переносом текста:
-
белое пространство -
разрыв слова -
Перенос через переполнение / Перенос слов -
разрыв строки
белое пространство
Пустое пространство управляет тем, как визуализируются пространства ; и может принимать 6 значений:
-
нормальный (значение по умолчанию) -
nowrap -
до -
предварительная упаковка -
предварительная -
перерывов
белое пространство: нормальное
Стандартное значение по умолчанию отображает текст на основе следующих правил:
- Текст обернут по размеру контейнера.
- Множественные пробелы и вкладки сворачиваются в единое пространство .
- Линии мягкого разрыва преобразуются в одинарный пробел .
CSS-код для белого пространства: нормальный
.example {
пробел: нормальный;
}
белое пространство: nowrap
Значение nowrap отображает текст на основе следующих правил:
- Текст: , а не , завернутый по размеру контейнера.
- Множественные пробелы и вкладки сворачиваются в единое пространство .
- Линии мягкого разрыва преобразуются в одинарный пробел .
CSS-код для белого пространства: nowrap
.example {
белое пространство: nowrap;
}
пробел: до
Значение до отображает текст на основе следующих правил:
- Текст: , а не , завернутый по размеру контейнера.
- Множественные пробелы и вкладки сохраняются как есть.
- Линии плавного разрыва также сохранены .
CSS-код для белого пространства: до
.example {
белое пространство: предварительно;
}
белое пространство: предварительная упаковка
Значение с предварительным переносом отображает текст на основе следующих правил:
- Текст обернут по размеру контейнера.
- Множественные пробелы и вкладки сохраняются как есть.
- Линии плавного разрыва также сохранены .
CSS-код для белого пространства: pre-wrap
.example {
белое пространство: предварительная упаковка;
}
пробел: предварительная строка
Значение перед строкой отображает текст на основе следующих правил:
- Текст обернут по размеру контейнера.
- Множественные пробелы и вкладки сворачиваются в единое пространство .
- Линии плавного разрыва сохраняются как есть.
CSS-код для белого пространства: предварительная строка
.example {
пробел: перед строкой;
}
пробелы: паузы
Значение пробелов прерывания отображает текст на основе следующих правил:
- Текст обернут по размеру контейнера.
- Множественные пробелы и вкладки сохранено но повешено в конце строки.
- Линии плавного разрыва также сохранены .
CSS-код для white-space: break-space
.example {
пробел: пробелы;
}
Демо для white-space
разрыв слова
разрыв слова управляет тем, как отображаются разрывы строк ; и может принимать 4 значения:
-
нормальный (значение по умолчанию) -
обкатка -
хранить все -
разрывное слово
разрыв слова: нормальный
Нормальное значение отображает текст на основе правил разрыва строки по умолчанию .
Код CSS для разрыва слова: нормальный
.example {
разрыв слова: нормальный;
}
word-break: break-all
разбить все значение вставляет разрыв строки в любом месте между символами. Это полезная настройка в основном для языков CJK.
Код CSS для разбиения по словам: break-all
.example {
слово-разрыв: сломать все;
}
word-break: keep-all
Значение keep-all применяется только на языках CJK , где сохраняет текстовых строк и не вставляет каких-либо разрывов строк.Для всех других языков это то же самое, что и нормальное значение .
Код CSS для разрыва слова: keep-all
.example {
слово-разрыв: сохранить все;
}
word-break: break-word
Слово прерывания значение вставляет разрыв строки только , когда это необходимо, чтобы избежать переполнения .
CSS-код для разрыва слова: break-word
.example {
слово-разрыв: разрыв-слово;
}
Демо для разбиения по словам
переполнение / перенос слов
overflow-wrap - это , что позволяет разрывать строки.Устаревшее имя свойства - с переносом слов , которое поддерживалось в предыдущих версиях большинства браузеров.
Может принимать 3 значения:
-
нормальный (значение по умолчанию) -
где угодно -
разрывное слово
перелив-обертка: нормальный
Нормальное значение вставляет разрывы строк только , когда существуют пробелы или другие «разрывающие» символы переносов.
Код CSS для переноса переполнения: нормальный
.пример {
переполнение-обертка: нормальная;
}
переполнение-обертка: где угодно
в любом месте значения вставляет разрывы строк, когда слова на превышают ширину контейнера , чтобы избежать переполнения.
Код CSS для переноса переполнения: где угодно
.example {
переполнение-обертка: где угодно;
}
overflow-wrap: break-word
Значение break-word вставляет разрывы строк, когда слова на превышают ширину контейнера , чтобы избежать переполнения; , но мягких оберток - это , а не , рассчитанные в размерах содержимого.
Код CSS для переноса переполнения: break-word
.example {
переполнение-обертка: слово-прерывание;
}
Демонстрация переполнения-обертывания
разрыв строки
разрыв строки управляет тем, как разрывы строк отображаются в основном для языков CJK ; и может принимать 5 значений:
-
авто (значение по умолчанию) -
без упаковки -
нормальный -
строгий -
где угодно
разрыв строки: авто
Значение auto вставляет разрывы строк в соответствии с правилами по умолчанию .
Код CSS для переноса строки: auto
.example {
разрыв строки: авто;
}
разрыв строки: свободный
свободное значение использует , чтобы избежать ограничительных правил разрыва строки , которые в основном полезны для коротких строк.
Код CSS для переноса строки: свободный
.example {
разрыв строки: свободный;
}
разрыв строки: нормальный
Нормальное значение использует большинство общих правил разрыва строки .
Код CSS для переноса строки: нормальный
.example {
разрыв строки: нормальный;
}
разрыв строки: строгий
Значение strict использует правила strict разрыва строки; Например, японские символы йон кана ( 拗 音 ) никогда не ломаются внутрь.
Код CSS для переноса строки: строгий
.example {
разрыв строки: строгий;
}
разрыв строки: где угодно
в любом месте значения вставляет разрывы строк в в любую позицию в словах, без в соответствии с любыми правилами переноса слов (такими как алгоритм разрыва строки Unicode) и без с добавлением любого символа переноса.
Разрыв строки : в любом месте отображается так, как если бы мы вставляли символ после каждого символа или пробела.
Код CSS для переноса строки: где угодно
.example {
разрыв строки: где угодно;
}
Демо для переноса строки
Будущие решения CSS
Наконец, есть новое свойство CSS: white-space-collapse , указанное в текстовом модуле CSS уровня 4, которое позволит дополнительно контролировать отрисовку пробелов и разрывов строк.
На сегодняшний день () все еще нет браузера, поддерживающего это свойство.
Как переносить текст по словам в HTML с помощью CSS
Свойство переноса слов, разрыва строки или переноса слов - это процесс разрыва длинного слова, чтобы оно соответствовало доступной ширине страницы или области отображения. Текст переносится на следующую строку. Свойство переноса слов разделяет следующую строку, когда доходит до конца страницы или текстового поля. Использование свойства word-wrap заставляет длинный текст переноситься на новую строку, задавая CSS для прерывания слова.Свойство word-wrap используется для переноса текста на следующую строку.
.wrap-text {
перенос слов: слово-разрыв;
белое пространство: nowrap;
}
Свойство переноса слов, переноса строки или переноса слов - это процесс разбиения длинных слов, чтобы они уместились в доступном
«word-break: break-all» - разбить слово
Свойство CSS переноса слов определяет процесс разбиения длинного слова, которое должно быть разбито и перенесено на следующую строку. Значение по умолчанию: нормальное.Разрыв строки или перенос слов - это функция продолжения на новой строке, когда строка не помещается в той же строке или не помещается в видимой области, каждая строка должна уместиться в видимом окне, которое можно читать без какой-либо горизонтальной прокрутка.
Свойство CSS переноса слов позволяет разбивать длинные слова и переносить их на следующую строку. Перенос слов переводит его в новую строку в абзацах и позволяет отображать текст в окне или другом экране области отображения.
В HTML есть тег
, который имеет ту же цель для разрыва строки, чтобы длинные слова умещались в доступной ширине страницы с помощью жесткого кода новой строки.Свойство CSS с переносом слов работает с кросс-браузерной поддержкой, включая IE в обновленной версии 9+ выше. Перенос слов - это простой метод, который помещает как можно больше слов в строку до следующей строки. Microsoft представила свойство CSS с переносом слов, которое добавлено в CSS3 и может поддерживаться во всех последних браузерах. Свойство CSS word-wrap определяет процесс разбиения длинного слова, чтобы оно соответствовало доступной ширине страницы или области отображения.
CSS Word Wrap - Учебное пособие и пример
Перенос по словам в CSS : Свойство переноса по словам в CSS используется для разрыва любого длинного слова и перехода к следующей или следующей строке.Он используется для предотвращения переполнения, если неразрывные струны слишком длинные для регулировки внутри контейнера.
Значения переноса слов
Значение Описание Нормальный Используется для разбиения слов только в некоторых разрешенных точках останова. break-word Это значение разбивает любое из неразрывных слов. Начальное Начальное значение устанавливает для свойства переноса слов значение по умолчанию. Inherit Он наследует это свойство от одного из своих родительских компонентов.
Пример переноса слов
Рассмотрим следующую простую иллюстрацию переноса слов:
<стиль> p.test
{
ширина: 11em;
цвет фона: # 00ffff;
граница: 1px solid # 000000;
отступ: 10 пикселей;
перенос слов: слово-разрыв;
} Вот очень длинное слово ниже:
Besafeeeeeeeeeeeeeeeeeeeeeeeeee.Это слово обрывается и переносится на следующую строку.
1
2
3
4
5
6
7
8
9
10
11
12
13
140002
18
19
20
21
Вот очень длинное слово ниже:
Besafeeeeeeeeeeeeeeeeeeeeeeeeee. Это слово обрывается и переносится на следующую строку.
Выход:
.