html - CSS：必要时换行和换行

Question

如何设置一个 div 以便它可以换行并在必要时断字？下面的例子，用点表示 div 的宽度（“zzzzzzz...”是一个单词）。

.....................
您好，这些是
词

...................................
zzzzzzzzzzzzzzzzzz
zzzzzz

Answer 1

你可以使用 cssword-wrap: break-word;

.wrap {
  width: 50px;
  word-wrap: break-word;
  border: 1px solid red
}

<div class="wrap">This is a mormal div wrapping and breaking words</div>

Answer 2

如果你想在容器太长时在某个位置分隔一个单词，你可以使用­实体（软连字符）。所以 HTML

singledoubletriple­quadruplequintupleburger 

会保留

singledoubletriplequadruplequintupleburger

当它适合一行时在屏幕上，但变成

singledoubletriple-
quadruplequintupleburger

如果这条线更短