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

Question

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

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

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

</div>

Однако содержимое переполняет DIV (как и ожидалось), потому что слово слишком длинное.браузер, чтобы «разбить» слово, где это необходимо, чтобы вместить весь контент внутри?

Answer 1

Использовать [word-break: break-word;]

Answer 2

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

word-break: break-all;

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

<wbr> (разрыв слова) означает: «Браузер может вставить разрыв строки здесь, если это пожелания. "Это браузер не думает разрыв строки не нужен случается.

Answer 3

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

Источники:

• http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
• http://css -tricks.com / фрагменты / CSS / предотвратить-длинные-URLs-из-ломать-вне контейнера /

CSS

.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;
}

Answer 4

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

Вы можете легко сделать это с 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 */
}

Надеюсь, это кому-нибудь поможет.

Answer 5

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

Answer 6

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

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

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

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

Answer 7

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

Answer 8

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

Реализация:

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

Answer 9

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

display: table-caption;

Answer 10

С MDN :

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

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

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

overflow-wrap: break-word;

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