word-break в CSS


Перенос слов CSS (свойства overflow-wrap, word-wrap, word-break, hyphens)

Указанные ниже свойства CSS определяют как переносить длинные слова:

  1. только там, где стоит чёрточка, пробел или Enter (искл., неразрывный пробел и неразрывный дефис ‑ ). Между частями одного слова пишется дефис (например, красно‐жёлтый), между словами — тире. «Мягкий дефис» ­ проявляется только при необходимости переноса. Если слово выходит за рамки родителя, то или ​ переносит его часть без чёрточки. В математических выражениях используется минус (например, 5 − 2). В номерах телефонов отображается цифровая чёрта (например, +7 800 000‒00‒00). И всё это не является той знакомой -, что есть на клавиатуре.
  2. после любого символа.
  3. согласно правилам русского языка с автоматическим применением дефиса.

В чём состоит различие одно свойства от другого

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

Для того, чтобы игнорировались черточки, сразу видимые глазу, вносим 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» .

Не переносить слова на другую строку

Скажем, пункт меню или кнопка будут нехорошо выглядеть, если разъедутся на части. Поэтому надо запретить их разделение. Для чего все вышеуказанные свойства следует поставить в режим «по умолчанию» и добавить white-space: pre; или white-space: nowrap;. Нажмите на white-space: nowrap; и посмотрите на наш полигон.

Управлять переносом слов при hyphens: auto;

15 комментариев:

Анонимный Хорошая статья. Спасибо! NMitra Рада слышать! Анонимный здорово, спасибо Vit Simak white-space: pre-wrap; очень помогает, но только если он один указан или максимум с word-wrap: break-word; Анонимный ыва Людмила Горбач ваваы Максим Дунаевский Вот спасибо! Поправил свою CSS как тут написано — текст на кнопках стал нормально отображаться. NMitra Пожалуйста, рада помочь. Анонимный Спасибо, хорошая статья. Анонимный kjgtfrfghjkl Анонимный ‘); drop table forum; — lol NMitra Чего-чего? Дмитрий lang=»ru» лучше писать в

-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
word-wrap: break-word; NMitra Спасибо за дополнение! Dmitry Mycelin «’); drop table forum; — lol»
Это гугловская форма комментариев вообще-то. :)

CSS word-break Свойство

Пример

Разбить слова на любой символ:

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

Свойство word-break указывает, как слова должны прерываться при достижении конца строки.


Значение по умолчанию: normal
Inherited: yes
Animatable: no. Читайте о animatable
Version: CSS3
Синтаксис JavaScript: object.style.wordBreak=»break-all»

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

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

В чем разница между «word-break: break-all» и «word-wrap: break-word» в CSS?

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

Разница между «перерыв в слове: разбить все» и «перенос слов: перерыв»;

  • разбить слово: разбить все; Он используется для разбиения слов на любой символ, чтобы предотвратить переполнение.
  • перенос слов: брейк-слово; Он используется для разбивки слов в произвольных точках, чтобы предотвратить переполнение.

«Word-break: break-all;» будет разбивать слово по любому символу, в результате чего затрудняется чтение, тогда как «word-wrap: break-word;» будет разбивать слово, не заставляя слово не разрываться в середине и оберните это в следующую строку.

Илон Маск рекомендует:  API для работы с доменами, API Whois, Api Domain, API blacklist

Пример 1: В этом примере отображаются значения свойства break-all.

Word Break

Class Properties
.break-normal word-break: normal; overflow-wrap: normal
.break-words overflow-wrap: break-word;
.break-all word-break: break-all;
.truncate overflow: hidden; text-overflow: ellipsis; white-space: nowrap

Normal

Use .break-normal to only add line breaks at normal word break points.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.

Break Words

Use .break-words to add line breaks mid-word if needed.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.

Break All

Use .break-all to add line breaks whenever necessary, without trying to preserve whole words.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.

Truncate

Use .truncate to truncate overflowing text with an ellipsis ( … ) if needed.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.

Responsive

To control the word breaks in an element only at a specific breakpoint, add a : prefix to any existing word break utility. For example, adding the class md:break-all to an element would apply the break-all utility at medium screen sizes and above.

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at sed dolorum ratione dolorem nisi velit cum.

Customizing

Responsive and pseudo-class variants

By default, only responsive variants are generated for word break utilities.

You can control which variants are generated for the word break utilities by modifying the wordBreak property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

word-break

The word-break property determines if and how to break lines in the middle of words.

Normally, lines that don’t fit inside their container break in certain points, specifically where there’s a white space or a hyphen. But when the word-break property is set to break-all , the browser will break lines at any point, even in the middle of a word that comes at the end of the line and that would be too long to fit inside the container.


The result of breaking lines in the middle of words will be close to that which we get when we justify text inside an element (see text-align ), except that white space is not affected, so there may be lines where a white space would be existent between the last word on the line and the edge of the container.

Trivia & Notes

The words broken at the end of each line by the word-break property become practically unreadable because there is no visual indication as to where the word has been broken.

A more readable and responsive alternative would be to use the word-wrap property in conjunction with the hyphens property to break long words and have the browser add hyphens at the points where the words have been broken. You can take it a step further and align the text using text-align: justify to get a full-width line effect with lines breaking words without sacrificing readability. You can read more and see more examples in the word-wrap and hyphens entry pages.

Official Syntax

  • Syntax:
  • Initial: normal
  • Applies To: all elements
  • Animatable: no
  • Values

    Examples

    The following line will tell the browser to break lines in the middle of words when necessary to fit inside their container.

    The following line will prevent h1 elements from being broken in the middle of words:

    Live Demo

    Browser Support


    CSS3 word-break

    Property to prevent or allow words to be broken over multiple lines between letters.

    word-break

    Easily manage projects with monday.com

    The word-break property in CSS can be used to change when line breaks ought to occur. Normally, line breaks in text can only occur in certain spaces, like when there is a space or a hyphen.

    In the example below we can make the word-break between letters instead:

    If we then set the width of the text to one em , the word will break by each letter:

    This value is often used in places with user generated content so that long strings don’t risk breaking the layout. One very common example is a long copy and pasted URL. If that URL has no hyphens, it can extend beyond the parent box and look bad or worse, cause layout problems.

    Values

    • normal : use the default rules for word breaking.
    • break-all : any word/letter can break onto the next line.
    • keep-all : for Chinese, Japanese and Korean text words are not broken. Otherwise this is the same as normal .

    This property is also often used in conjunction with the hyphens property so that when breaks occur a hypen is inserted, as per the standard in books.

    The full usage, with needed vendor prefixes, is:

    Using these properties on the universal selector can be useful if you have a site with a lot of user-generated content. Although fair warning, it can look weird on titles and pre-formatted text (

    В чем разница между «word-break: break-all» и «word-wrap: break-word» в CSS

    В настоящее время я задаюсь вопросом, в чем разница между ними. Когда я использовал оба, они, похоже, сломают слово, если оно не подходит для контейнера. Но почему W3C сделал два способа сделать это?


    Спецификация W3, которая говорит об этих, кажется, предполагает, что word-break: break-all требуется для определенного поведения с CJK (китайским, японским и Корейский), тогда как word-wrap: break-word является более общим, не связанным с CJK, поведением.

    word-wrap: break-word недавно изменен на overflow-wrap: break-word

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

    Итак, если у вас много фиксированных пространств, которые получают контент динамически, вы можете просто использовать word-wrap: break-word , так как в этом случае прерываются только непрерывные слова, а в случае, если предложение содержит много слов, пробелы настраиваются, чтобы получить неповрежденные слова (без разрыва в слове).

    И если это не имеет значения, идите либо.

    С word-break начинается очень длинное слово в точке, в которой оно должно начинаться и он прерывается до тех пор, пока требуется

    Однако, при word-wrap , очень длинное слово НЕ начнется в точке, в которой оно должно начинаться. он переносится на следующую строку и затем разбивается до тех пор, пока требуется

    По крайней мере, в Firefox (начиная с версии v24) и Chrome (начиная с версии v30) при применении к контенту в элементе table :

    на самом деле не приведет к переносу длинных слов, что может привести к тому, что таблица превысит границы ее контейнера;

    приведет к переводу слов и привязке таблицы к контейнеру.

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

    Теперь это то, что у нас есть:

    Переполнение-обертка

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

    normal: указывает, что линии могут ломаться только при нормальных точках прерывания слов.

    break-word: указывает, что обычно нерушимые слова могут быть разбиты в произвольных точках, если в строке нет других допустимых точек останова.

    слово-пауза


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

    • обычный. Используйте правило прерывания по умолчанию.
    • break-all. Разрывы слов могут быть вставлены между любым символом для текста, отличного от CJK (китайский/японский/корейский).
    • сохранить все. Не допускайте разрывов слов для текста CJK. Не-CJK-поведение текста такое же, как и для обычного.

    Теперь вернемся к вашему вопросу, основное различие между переполнением и word-break заключается в том, что первое определяет поведение в ситуации переполнения, а позднее определяет поведение в нормальной ситуации (без переполнения). Ситуация переполнения происходит, когда в контейнере недостаточно места для хранения текста. Разрыв линий в этой ситуации не помогает, потому что нет места (представьте себе коробку с шириной и высотой фиксации).

    • overflow-wrap: break-word : В ситуации переполнения сломайте слова.
    • word-break: break-all : В обычной ситуации просто сложите слова в конце строки. Переполнение не требуется.

    CSS3.com — A comprehensive CSS 3 reference guide, tutorial, and blog

    CSS WORD-BREAK

    This property controls the line breaking behavior within words. It is especially useful in cases where multiple languages are used within an element.

    Example
    Possible Values

    normal: Normal line breaking behavior for the language is used.

    break-all: Useful where content contains a majority of Asian character set content, to which this value behaves like ‘normal’. Non-Asian character set content may be arbitrarily broken across lines.

    keep-all: Useful where content contains a minority of Asian character set content, to which content is not broken across lines. For non-Asian character set content, this value behaves like ‘normal’.

    What is the difference between “word-break: break-all” versus “word-wrap: break-word” in CSS ?

    The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line.

    Difference between the “word-break: break-all;” and “word-wrap: break-word;”


    • word-break: break-all; It is used to break the words at any character to prevent overflow.
    • word-wrap: break-word; It is used to broken the words at arbitrary points to prevent overflow.

    The “word-break: break-all;” will break the word at any character so the result is to difficulty in reading whereas “word-wrap: break-word;” will split word without making the word not break in the middle and wrap it into next line.

    Example 1: This example display the break-all property values.

    How to break long words in an HTML (or CSS) table

    If you’re reading this you’re either curious or you’ve got serious issue trying to handle long words in a table cell. As I had. So, here is a full review of my investigations to save you some time.

    Following solutions work on both HTML and CSS tables, and are supported by modern browsers and IE8+.

    1. [#] Breaking words with word-wrap and max-width
    2. [#] Breaking words with word-wrap and table-layout
    3. [#] Breaking words with word-break
    4. [#] Make breaks more elegant using CSS hyphens

    Breaking words with word-wrap and max-width

    word-wrap prevents a long word from overflowing its container by breaking the text onto the next line. It works fine when applied on a block element (such as a

    ), but has no effect within a table .

    To get word-wrap working on a table cell, max-width: 1px is the magic fix you need:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis dui. Duis tempor ligula scelerisque sodales faucibus. Quisque sodales leo nec. Loremipsumdolorsitametconsectetur

    Note this max-width trick also works to make an ellipsis within a table.

    Should I use word-wrap or overflow-wrap ?

    word-wrap is the historic and nonstandard property. It has been renamed to overflow-wrap but remains an alias browers must support in future. Many browsers (especially the old ones) don’t support overflow-wrap and require word-wrap as a fallback (which is supported by all).

    If you want to please the W3C you should consider associate both in your CSS. If you don’t, using word-wrap alone is just fine.

    Breaking words with word-wrap and table-layout

    Associate word-wrap and table-layout: fixed works to break long words in a table cell, but this solution has some constraints you should consider carefully.

    By using table-layout with fixed value you change the algorithm used to lay out table cells, rows, and columns:

      In Firefox , paddings and borders are not taken into account in the calculation of the column w >all browsers , if no w >

      ** Not 75% in Firefox ** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis dui. Loremipsumdolorsitamet

    Breaking words with word-break

    word-break specifies how words should be broken when reaching the end of the line.

    Used with the break-all value, browsers will insert line break between any two characters , while word-wrap will only create a break if the word can’t stand on its own line.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis dui. Duis tempor ligula scelerisque sodales faucibus. Lorem ipsum lorem ipsum lorem ipsum

    Make breaks more elegant using CSS hyphens

    hyphens property allows text to be hyphenated when words are too long to fit in one line. Hyphenation opportunities depend on the language of your content.

    Native support is not that good at the moment. Worst thing is hyphens is not working at all in Windows Chrome (it does work on Android and Mac OS plateforms). Proprietary prefixes and one of the word-wrap fix ( max-width or table-layout ) as a complement are necessary to make this solution viable.

    Since hyphenation rules are language-specific, you also need the lang attribute to be defined on a parent element (mostly on the tag).

    Илон Маск рекомендует:  Что такое код getdialogbaseunits
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL