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

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

Answer 2

您可以使用包装器div和多列css：

.wrapper {
    -webkit-column-width: 150px; //You can't use 100%
    column-width: 150px;
    height: 100%;
}

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