css溢出文本显示在几行没有分词

Posted 2023-05-08

【中文标题】css溢出文本显示在几行没有分词

【英文标题】：Css overflow text displayed in few lines without word break

【发布时间】：2015-08-23 22:41:36

【问题描述】：

我有一些长文本显示在一个 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/ 如您所见，仅显示一行

【问题讨论】：

"几行" - 用换行符或<br>?

分隔

你能做jsFiddle吗

也可以尝试使用overflow:auto;

你可以查看这个：codepen.io/martinwolf/pen/qlFdp

【参考方案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

【讨论】：

@LAGZ，使用 JS 版本 (clamp.js) 使其在 IE 浏览器中工作。 css-tricks.com/line-clampin

【参考方案2】：

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

添加以下css即可解决：

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

并删除：空白：nowrap；

http://jsfiddle.net/f5n1wrxs/