强制 Spans 包裹在 Inline-Block 父级中

Question

我正在编写一个应用程序，其中我将单个字符包装在跨度中以更好地处理点击事件。这些字符位于带有display: inline-block 的div 中。如何让文本换行？我试过了：

div {
  display: inline-block;
  word-wrap: wrap;
  word-break: break-all;
}

还有

overflow-wrap: break-word;
white-space: pre-wrap;

无济于事。如您所见，它适用于普通文本，但不适用于包含在 spans 中的文本。

JSBin：http://jsbin.com/hugiqohawi/edit?html,css,output

Answer 1

为div 元素设置宽度。 spans 将在此时换行。

对于流体宽度，使用100%：

div {
  display: inline-block;
  word-wrap: wrap;
  word-break: break-all;
  width: 100%;
}