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

我有一些长文本显示在一个div内这个div有一个固定的宽度和高度。我希望文本显示在几行（作为div高度）并且句子单词不会中断（单词前缀在一行中，而在下一行中继续）此外，我想添加省略号在末尾最后一句话。Css溢出文本显示在几行没有分词

CSS：

white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;

但这显示一行文字，即使div包含了几行。

第二个选项：

word-wrap: break-word;

这不像第一次突破单词和句子显示几行 - 这是没有好自言在中间，并在年底打破这句话没有省略号（...）

如何能够做到以下几点：

1）几个句子作为DIV高度

2）无字打破

3）在结束省略号显示（最后一行包含省略号）

连接的jsfiddle：https://jsfiddle.net/vghup5jf/1/ ，你可以看到只有一个行显示

来源

2015-06-09 Ortal Blumenfeld Lagziel

“几行” - 由新行或分居''
？ – Siguza

你可不可以让jsFiddle –

也可以尝试用overflow：auto; –

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-09 09:11:43 Prime

它不适用于Internet Explorer ... –

@LAGZ，使用JS版本（clamp.js），使其在IE浏览器中工作。 https://css-tricks.com/line-clampin/ – Prime

非常感谢蝙蝠侠，这是最终的结果：

添加以下CSS将解决这个问题：

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

和删除：空白：NOWRAP;

http://jsfiddle.net/f5n1wrxs/

来源

2015-06-09 09:32:09

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

回答

相关问题