Question

我有一些长文本显示在div中这个div有一个固定的宽度和高度。我希望文本显示在几行（作为div高度），并且句子单词不会中断（一行中的单词前缀和下一行中的continue）此外我想在结尾处添加省略号最后一句。

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。

使用JS

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

使用CSS-SASS

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

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/

Css溢出文本显示在几行中，没有单词划分

2 个答案: