CSS溢出文本显示在几行中，没有断字

Question

我有一些长文本显示在 div 中，该 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/ ，您可以看到只显示一行

Answer 1

ellipsis不适用于多行，并且使用纯 CSS 也是不可能的。-webkit下面是适用于 chrome 和 Safari（渲染引擎）的技巧。

.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。

使用JS

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

使用CSS-SASS

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