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

Question

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

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

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

</div>

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

Answer 1

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

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

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

, чтобы при достижении ширины элемента текст разбивался на строки.

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

white-space: normal;