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

Question

如何设置一个div，使其包装文本并在必要时也会破坏文字？下面的示例，点显示div的宽度（＆＃34; zzzzzzz ......＆＃34;都是一个单词）。

....................................
您好，这些是
字

....................................
zzzzzzzzzzzzzzzzzz
ZZZZZZ

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果你想要一个单词在某个位置被分开，当它对于容器来说太长时，你可以使用­实体（软连字符）。所以HTML

singledoubletriple­quadruplequintupleburger 

将保持

singledoubletriplequadruplequintupleburger

屏幕上的

，当它适合一行，但变成

singledoubletriple-
quadruplequintupleburger

如果线条较短