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

Question

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

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

也

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

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

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%;
}