Word wrap break word не работает

asked Apr 5, 2016 at 6:06

answered Mar 19, 2019 at 9:08

To properly break long-words it requires to combine several CSS properties, I would suggest defining and applying helper class like this:

.break-long-words {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
  word-break: break-word;
  hyphens: auto;
}

Properties explained:

• overflow-wrap and word-wrap are aliases for same thing but some browsers support one and not the other so we need them both. They
  are offical «correct» way to break words but they don’t have any effect on elements with dynamic width so we need more…
• word-break is originally intended for requiring a particular behaviour with CJK (Chinese, Japanese, and Korean) text but works similar to
  word-wrap but in WebKit break-all value breaks everything and everywhere. For that reason we must use non-standard and poorly
  documented WebKit-only break-word value.
• and optionally, if it makes sense for break words to have hypens (ie. for URLs it probably doesn’t) we can use hypens in browsers that
  support them (at the moment Firefox, Safari, Edge and IE 10+). Also note that in Firefox hypens don’t work if you have word-brake
  property so unless you have fixed-width container you must choose between hypens on FF or legacy support.

Note that I omitted vendor prefixes but if you don’t use something like Autoprefixer than this is full verison:

.break-long-words {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

answered Apr 11, 2016 at 17:45

Use the word-break style to define where in the word to break to the next line. By default, it uses spaces or hyphens but you can set it to break-all to allow breaking on any letter:

.comment_text {
    display: inline-block;
    word-wrap: break-word;
    word-break: break-all;
    width: 100%;
}

answered Apr 5, 2016 at 6:11

.comment_content{
  width:500px;
  border:1px solid #ccc;
}

.comment_author{
  width: 100px;
  float: left;
}

.comment_text{
  width: 400px;
  word-wrap: break-word;
  display:inline-block;
}

<div class="comment_content">

        <span class="comment_author">Hello</span>
        <span class="comment_text">qeqweqweqweqeeqeqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqeqweqweqweqweqweqweqwewqeqweqweqweqweqweqweqweqweqweqeqeqweqweqweqweqweqweqweqweqweqeqewqweqeq</span>

    </div>

MirodilMirodil

2,2692 gold badges29 silver badges38 bronze badges

You can use

word-break: break-all;

See fiddle here

fiddle

answered Apr 5, 2016 at 6:13

Sunil GehlotSunil Gehlot

1,5492 gold badges18 silver badges32 bronze badges

Si ClancySi Clancy

2913 silver badges2 bronze badges

answered Aug 11, 2018 at 20:43

Try this:

.tab_title a{
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
} 

answered Jul 31, 2015 at 13:54

answered Mar 7, 2013 at 16:21

I have had good success in Chrome, Firefox and IE with using:

word-break: break-word;
word-wrap: break-word;

In my problem case I was using:

display: table-cell;

and I ended up having to include

max-width: 440px;

to get wrapping in all browsers. In most cases the max-width was not necessary. Using

word-break: break-all;

does not work well in IE because although long words without spaces will be wrapped, short words also stop wrapping at spaces.

answered Apr 28, 2017 at 18:34

Brian SBrian S

3,04636 silver badges55 bronze badges

Чтобы правильно сломать длинные слова, требуется объединить несколько свойств CSS, я бы предложил определить и применить вспомогательный класс следующим образом:

.break-long-words {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
  word-break: break-word;
  hyphens: auto;
}

Свойства объяснены:

• overflow-wrap и word-wrap являются псевдонимы за одно и то же, но некоторые браузеры поддерживают один, а не другой, поэтому мы нуждаемся в них обоих. Oни
  являются официальным «правильным» способом разбить слова, но они не оказывают никакого влияния на элементы с динамической шириной, поэтому нам нужно больше…
• word-break изначально предназначен для запроса определенного поведения с текстом CJK (китайский, японский и корейский), но работает аналогично
  word-wrap, но в WebKit break-all значение разрывает все и везде. По этой причине мы должны использовать нестандартные и плохо
  задокументированное значение слова «только для WebKit».
• и, при желании, если имеет смысл разрывать слова, чтобы иметь hypens (т.е. для URL-адресов это, вероятно, нет), мы можем использовать hypens в браузерах, которые
  (в настоящий момент Firefox, Safari, Edge и IE 10+). Также обратите внимание, что в Firefox hypens не работают, если у вас есть слово-тормоз
  поэтому, если у вас нет контейнера с фиксированной шириной, вы должны выбрать между подписями FF или старой поддержкой.

Заметьте, что я опустил префиксы для поставщиков, но если вы не используете что-то вроде Autoprefixer, то это полная проверка:

.break-long-words {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

Teo Dragovic
11 апр. 2016, в 18:26

Поделиться

Мне будет полезно. Вы должны указать width, особенно в вашем случае.

.comment_content{
  width:500px;
  border:1px solid #ccc;
}

.comment_author{
  width: 100px;
  float: left;
}

.comment_text{
  width: 400px;
  word-wrap: break-word;
  display:inline-block;
}

<div class="comment_content">

        <span class="comment_author">Hello</span>
        <span class="comment_text">qeqweqweqweqeeqeqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqweqeqweqweqweqweqweqweqwewqeqweqweqweqweqweqweqweqweqweqeqeqweqweqweqweqweqweqweqweqweqeqewqweqeq</span>

    </div>

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

Mirodil
19 июнь 2017, в 20:55

Поделиться

Используйте стиль word-break, чтобы определить, где в слове переходить на следующую строку. По умолчанию он использует пробелы или дефисы, но вы можете установить его на break-all, чтобы разрешить разбиение на любую букву:

.comment_text {
    display: inline-block;
    word-wrap: break-word;
    word-break: break-all;
    width: 100%;
}

Steve
05 апр. 2016, в 07:07

Поделиться

Sunil Gehlot
05 апр. 2016, в 07:43

Поделиться

Вы можете использовать

word-break: break-all;

Смотрите здесь скрипку

fiddle

pradeep1991singh
05 апр. 2016, в 07:14

Поделиться