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

Answer 2

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

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

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