CSS:必要时包装文本和中断单词

Question

如何设置div以便它将包装文本并在必要时也会破坏文字？下面的示例,点显示div的宽度("zzzzzzz ......"都是一个单词).

....................................
你好这些是
单词

....................................
zzzzzzzzzzzzzzzzzzz
zzzzzz

Answer 1

你可以使用CSS word-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

如果线路较短