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。
其他回答
我将这些css属性用于行省略号
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;是在…之后的行数(3行)所示。
纯css方式用省略号修饰多行文本
调整文本容器的高度, 用-webkit-line-clamp控制断线:2;
.block-ellipsis {
display: block;
display: -webkit-box;
max-width: 100%;
height: 30px;
margin: 0 auto;
font-size: 14px;
line-height: 1;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
它是一个非标准的CSS,当前版本的CSS中没有涵盖它(Firefox不支持它)。尝试使用JavaScript。
正如其他人已经回答的那样,纯CSS解决方案是不存在的。 jQuery有一个非常好用的插件,它叫dotdotdot。 它使用容器的宽度和高度来计算是否需要截断和添加省略号。
$("#multilinedElement").dotdotdot();
这是一个jsFiddle。
文本溢出的要求:省略号;工作是一行的空白(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将把省略号放在第二行。