3

我有一些长文本显示在一个 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/ 你可以看到只显示一行

4

2 回答 2

4

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。

使用 JS

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

使用 CSS-SASS

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

于 2015-06-09T09:11:43.913 回答
0

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

添加以下css将解决它：

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

并删除：空白：nowrap；

http://jsfiddle.net/f5n1wrxs/

于 2015-06-09T09:32:09.557 回答