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

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

white-space: normal;

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

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

#sampleDiv{
   overflow-wrap: 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 :

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

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

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

overflow-wrap: break-word;

Можно ли использовать ?

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

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

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

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

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

display: table-caption;

Удалить white-space: nowrap, если таковые имеются.

Выполнить:

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

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

CSS word-wrap:break-word;, протестировано в FireFox 3.6.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;
}

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

word-break: break-all;

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

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

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

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

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

Обнаружено, что использование следующего работает во всех основных браузерах (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;
}

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

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

Как упомянуто в ответе @davidcondrey, нет просто ZWSP, но также и ЗАСТЕНЧИВОГО ­ ­, который может использоваться в очень длинных, созданных словах (думайте немецкий или нидерландский язык), которые должны быть повреждены на месте , Вы хотите, чтобы он был. Невидимый, но это дает дефису момент, который это необходимо, таким образом связывая и слово и строку, заполненную к самому большому.

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

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