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 ...
当前回答
我不是一个JS专业人士,但我想出了一些方法,你可以这样做。
HTML:
<p id="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum consequat tortor et euismod. Nam commodo consequat libero vel lobortis. Morbi ac nisi at leo vehicula consectetur.</p>
然后使用jQuery将其截断为特定的字符数,但最后一个单词像这样:
// Truncate but leave last word
var myTag = $('#truncate').text();
if (myTag.length > 100) {
var truncated = myTag.trim().substring(0, 100).split(" ").slice(0, -1).join(" ") + "…";
$('#truncate').text(truncated);
}
结果如下所示:
我爱你,我爱你,我爱你。发病原因 基本结果tortor et…
或者,你可以像这样简单地截断它到一个特定的字符数:
// Truncate to specific character
var myTag = $('#truncate').text();
if (myTag.length > 15) {
var truncated = myTag.trim().substring(0, 100) + "…";
$('#truncate').text(truncated);
}
结果如下所示:
我爱你,我爱你,我爱你。发病原因 结果元素,tortoret euismod…
希望这能有所帮助。
这是jsFiddle。
其他回答
我找到了一个解决方案,但你需要知道一个粗略的字符长度,将适合你的文本区域,然后加入一个…到前面的空格。
我是这样做的:
假设一个粗略的字符长度(在本例中为200)并传递给a 与你的文本一起发挥作用 分隔空格,这样你就有了一根长字符串 使用jQuery来切片字符后的第一个“”空格 长度 加入剩下的…
代码:
truncate = function(description){
return description.split('').slice(0, description.lastIndexOf(" ",200)).join('') + "...";
}
这里有一个小提琴- http://jsfiddle.net/GYsW6/1/
正如其他人已经回答的那样,纯CSS解决方案是不存在的。 jQuery有一个非常好用的插件,它叫dotdotdot。 它使用容器的宽度和高度来计算是否需要截断和添加省略号。
$("#multilinedElement").dotdotdot();
这是一个jsFiddle。
这里所有的答案都是错的,他们漏掉了重要的部分,高度
.container{
width:200px;
height:600px;
background:red
}
.title {
overflow: hidden;
line-height: 20px;
height: 40px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
<div class="container">
<div class="title">this is a long text you cant cut it in half</div>
</div>
太遗憾了,你不能让它工作超过两行!如果元素是显示块,高度设置为2em或其他,当文本溢出时,它会显示省略号,那就太棒了!
对于单个眼线,您可以使用:
.show-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
对于多行,也许你可以使用Polyfill,如jQuery autoellipsis,这是在github http://pvdspek.github.com/jquery.autoellipsis/上
如果有人正在使用SASS/SCSS,并偶然发现了这个问题-也许这个mixin可以帮助:
@mixin line-clamp($numLines : 1, $lineHeight: 1.412) {
overflow: hidden;
text-overflow: -o-ellipsis-lastline;
text-overflow: ellipsis;
display: block;
/* autoprefixer: off */
display: -webkit-box;
-webkit-line-clamp: $numLines;
-webkit-box-orient: vertical;
max-height: $numLines * $lineHeight + unquote('em');
}
这只在webkit浏览器中添加省略号。休息只是把它切断了。