强制跨越包裹在内联块父级

Question

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

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

以及

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

无济于事。正如您所看到的，它适用于普通文本，但不适用于以跨度包装的文本。

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

Answer 1

设置div元素的宽度。此时span将换行。

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

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