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

Ответ 1

Используйте word-wrap: break-word,

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

Ответ 2

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

word-break: break-all;

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

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

Ответ 3

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

Источники:

• 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/

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

Ответ 4

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

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

Надеюсь, что кто-то поможет.

Ответ 5

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

Ответ 6

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

Ответ 7

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

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

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

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

Ответ 8

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

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

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

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

Ответ 9

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

display: table-caption;

Ответ 10

От MDN:

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

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

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

overflow-wrap: break-word;

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

Ответ 11

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

white-space: normal;

Ответ 12

Сделайте это:

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

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