CSS溢出文本在不换行的情况下显示为几行

Question

我有一些长文本要显示在一个固定宽高的div里。我希望这段文本能够显示在几行之内（不超过div的高度），而且句子中的单词不能被分开显示（比如一个单词的前缀显示在一行，剩余的则显示在下一行），同时我还想在最后一句话结尾处添加省略号。

CSS：

white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

但是这样会将文本显示在一行中，即使div包含了几行文本。

第二个选项：

word-wrap: break-word;

这与第一次断句不同，单词和句子被显示在几行中 - 这不好，因为单词在中间和句子结尾处被分开，没有省略号（...）。

如何实现以下效果：

1）将div高度限制为少数几个句子。

2）不换行。

3）最后一行显示省略号。

附JSFiddle链接：https://jsfiddle.net/vghup5jf/1/。正如您所见，仅显示了一行。

- Ortal Blumenfeld Lagziel

---

几行代码 - 通过换行符或<br>分隔? - Siguza

你能制作jsFiddle吗？ - Suraj Palwe

可以尝试使用overflow:auto; - sonam gupta

你可以查看这个链接：http://codepen.io/martinwolf/pen/qlFdp - sasi

Answer 1

ellipsis 在多行文本上无法正常工作，而且使用纯CSS也不可能实现。以下是一种在Chrome和Safari（-webkit 渲染引擎）上有效的技巧。

.ellipsis {
    display: block;
    display: -webkit-box;
    max-width: 400px;
    max-height: 100px;
    font-size: 20px;
    line-height: 1.4;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="ellipsis">
     <span>
       I have a long text that display in div this div has a fixed width and height, I want the text will be displayed in a few lines (as the div height) and that the sentence words will not break(word prefix in one line and the continue in the next line) furthermore I want to add ellipsis at the end of the last sentence.
      </span>
</div>

为了实现跨平台兼容性，您应该使用SASS或JavaScript。

使用JavaScript

https://css-tricks.com/line-clampin/

使用CSS-SASS

http://codepen.io/martinwolf/pen/qlFdp

- Prime

---

@LAGZ，请使用JS版本（clamp.js）使其在IE浏览器中正常工作。 https://css-tricks.com/line-clampin/ - Prime

Answer 2

非常感谢BaTmaN，这是最终结果：

添加以下CSS将解决此问题：

display: -webkit-box !important; -webkit-line-clamp: 2 !important;
   -webkit-box-orient: vertical !important;

并删除：white-space: nowrap;

http://jsfiddle.net/f5n1wrxs/

- Ortal Blumenfeld Lagziel