css - 如何垂直剪辑文本，使其不会在中间分割一条线

Question

我想知道是否有一些 css/js 魔术可以防止文本在一行的中间垂直拆分。我在下面的例子中使用溢出:隐藏。文本不是静态的……它是由用户输入的富文本，所以我无法控制格式。

我希望它看起来像这样:

Answer 1

这是一个可能的示例解决方案:

.dataTable td {
  /* essential */
  text-overflow: ellipsis;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;

  /* for good looks */
  padding: 10px;
}

通过http://davidwalsh.name/css-ellipsis

解决方案示例: http://jsfiddle.net/4Fpq2/

这至少应该提供一个起点。

此外，这里还有一些其他可能的解决方案:

• http://www.mobify.com/dev/multiline-ellipsis-in-pure-css
• http://softwareas.com/pure-css-solution-to-avoid-cutting-off-text