Как заставить разрыв строки в длинном слове в DIV?

Хорошо, это действительно смущает меня. У меня есть некоторый контент внутри div, например:

<div style="background-color: green; width: 200px; height: 300px;">

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

</div>

Однако содержимое переполняет DIV (как и ожидалось), поскольку слово «слишком длинное».

Как заставить браузер «разбить» слово там, где это необходимо, чтобы вместить весь контент внутри?

использование word-wrap:break-word;

Он даже работает в IE6, что является приятным сюрпризом.

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

Существующее использование word-wrapсегодня все еще работает, поскольку это псевдоним overflow-wrapсогласно спецификации.

Я не уверен в совместимости браузера

word-break: break-all;

Также вы можете использовать <wbr>тег

<wbr>(разрыв слова) означает: «Браузер может вставить разрыв строки здесь, если пожелает». Если браузер не считает, что разрыв строки необходим, ничего не происходит.

Это можно добавить к принятому ответу для решения «кросс-браузер».

Источники:

• http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
• http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

.your_element{
    -ms-word-break: break-all;
    word-break: break-all;

 /* Non standard for webkit */
     word-break: break-word;

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

Я просто гуглил ту же проблему и опубликовал свое окончательное решение ЗДЕСЬ . Это актуально и для этого вопроса.

Вы можете легко сделать это с помощью div, присвоив ему стиль word-wrap: break-word(и вам может потребоваться установить его ширину).

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

Тем не менее, для таблиц , необходимо также применять: table-layout: fixed. Это означает, что ширина столбцов больше не является изменяемой, а определяется на основе ширины столбцов только в первой строке (или с помощью указанных значений ширины). Узнайте больше здесь .

Образец кода:

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

​является HTML-сущностью для символа Юникод, называемого пробелом нулевой ширины (ZWSP), который является невидимым символом, который определяет возможность разрыва строки. Точно так же целью дефиса является определение возможности разрыва строки в пределах границы слова.

Обнаружено, что использование следующего работает во всех основных браузерах (Chrome, IE, Safari iOS / OSX), за исключением Firefox (v50.0.2) при использовании flexbox и использовании width: auto.

.your_element {
    word-wrap: break-word;   
    overflow-wrap: break-word;
    word-break: break-word;
}

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

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

CSS word-wrap:break-word; , протестировано в FireFox 3.6.3

Я решил мою проблему с кодом ниже.

display: table-caption;

Удалить white-space: nowrap, если есть.

Воплощать в жизнь:

white-space: inherit;
word-break: break-word;

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

.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

DEMO

td {
   word-break: break-word;
   white-space: pre-wrap;
   -moz-white-space: pre-wrap;      
}

table {
    width: 100px;
    border: 1px solid black;
    display: block;
}

<table>
<tr><th>list</th>
<td>
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
</td>
</tr>
</table>

От MDN :

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

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

Таким образом, вы можете использовать:

overflow-wrap: break-word;

Могу ли я использовать ?

Сначала вы должны определить ширину вашего элемента. Например:

#sampleDiv{
  width: 80%;
  word-wrap:break-word;
}

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

так что когда текст достигнет ширины элемента, он будет разбит на строки.

Как упоминалось в ответе @ davidcondrey, есть не только ZWSP, но и SHY, ­ ­который можно использовать в очень длинных, составленных словах (например, немецком или голландском), которые должны быть разбиты на том месте, где вы хотите, чтобы это было. Невидимый, но он дает дефису момент, когда он необходим, таким образом, сохраняя связь между словом и строкой.

Таким образом, слово luchthavenpolitieagent может быть отмечено как lucht­haven­politie­agentдающее более длинные части, чем слоги слова.
Хотя я никогда не читал ничего официального об этом, эти мягкие дефисы получают более высокий приоритет в браузерах, чем официальные дефисы в отдельных словах конструкции ( если у них вообще есть какое-то расширение).
На практике ни один браузер не способен взломать такое длинное, сложное слово само по себе; на меньших экранах, приводящих к новой строке для него, или в некоторых случаях даже к одной строке слова (например, когда два из этих созданных слов следуют).

К вашему сведению: это голландский для офицера полиции аэропорта

разрыв слова: нормальный, кажется, лучше использовать, чем разрыв слова: разрывное слово, потому что разрывное слово разрывает начальный, такой как EN

word-break: normal

Сделай это:

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

#sampleDiv{
   overflow-wrap: break-word;
}

просто попробуйте это в нашем стиле

white-space: normal;