CSS文本溢出:在第二行省略号,这是可能的吗?我在网上找不到。
例子:
我想要的是这样的:
I hope someone could help me. I need
an ellipsis on the second line of...
但实际情况是这样的:
I hope someone could help me. I ...
CSS文本溢出:在第二行省略号,这是可能的吗?我在网上找不到。
例子:
我想要的是这样的:
I hope someone could help me. I need
an ellipsis on the second line of...
但实际情况是这样的:
I hope someone could help me. I ...
当前回答
这是一个纯css的好例子。
.container{ width: 200px; } .block-with-text { overflow: hidden; position: relative; line-height: 1.2em; max-height: 3.6em; text-align: justify; margin-right: -1em; padding-right: 1em; } .block-with-text+.block-with-text{ margin-top:10px; } .block-with-text:before { content: '...'; position: absolute; right: 0; bottom: 0; } .block-with-text:after { content: ''; position: absolute; right: 0; width: 1em; height: 1em; margin-top: 0.2em; background: white; } <div class="container"> <div class="block-with-text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a </div> <div class="block-with-text"> Lorem Ipsum is simply dummy text of the printing and typesetting industry </div> <div class="block-with-text"> Lorem Ipsum is simply </div> </div>
其他回答
迟回复,但一个html换行也可以,所以你可以做一个html + css唯一的解决方案。所以通常使用br元素是不好的做法,但如果你用br打断了注释,text-overflow省略号将从html文本的下一行开始。
太遗憾了,你不能让它工作超过两行!如果元素是显示块,高度设置为2em或其他,当文本溢出时,它会显示省略号,那就太棒了!
对于单个眼线,您可以使用:
.show-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
对于多行,也许你可以使用Polyfill,如jQuery autoellipsis,这是在github http://pvdspek.github.com/jquery.autoellipsis/上
文本溢出的要求:省略号;工作是一行的空白(pre, nowrap等)。这意味着文本永远不会到达第二行。
因此。在纯CSS中是不可能的。
当我正在寻找完全相同的东西时,我的来源:http://www.quirksmode.org/css/textoverflow.html (Quirksmode ftw!)
编辑如果好的CSS神将实现http://www.w3.org/TR/css-overflow-3/#max-lines,我们可以在纯CSS中使用fragments(新)和max-lines(新)。还有一些关于http://css-tricks.com/line-clampin/的更多信息
编辑2 WebKit/Blink有line-clamp: -webkit-line-clamp: 2将把省略号放在第二行。
我将这些css属性用于行省略号
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;是在…之后的行数(3行)所示。
我找到了一个解决方案,但你需要知道一个粗略的字符长度,将适合你的文本区域,然后加入一个…到前面的空格。
我是这样做的:
假设一个粗略的字符长度(在本例中为200)并传递给a 与你的文本一起发挥作用 分隔空格,这样你就有了一根长字符串 使用jQuery来切片字符后的第一个“”空格 长度 加入剩下的…
代码:
truncate = function(description){
return description.split('').slice(0, description.lastIndexOf(" ",200)).join('') + "...";
}
这里有一个小提琴- http://jsfiddle.net/GYsW6/1/