html - 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 也不行。下面是适用于 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。

Using JS

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

Using CSS-SASS

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