2024-01-27 06:00:03

第二行CSS省略

CSS文本溢出:在第二行省略号,这是可能的吗?我在网上找不到。

例子:

我想要的是这样的:

I hope someone could help me. I need 
an ellipsis on the second line of...

但实际情况是这样的:

I hope someone could help me. I ... 

当前回答

太遗憾了,你不能让它工作超过两行!如果元素是显示块,高度设置为2em或其他,当文本溢出时,它会显示省略号,那就太棒了!

对于单个眼线,您可以使用:

.show-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

对于多行,也许你可以使用Polyfill,如jQuery autoellipsis,这是在github http://pvdspek.github.com/jquery.autoellipsis/上

其他回答

我不是一个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,当前版本的CSS中没有涵盖它(Firefox不支持它)。尝试使用JavaScript。

太遗憾了,你不能让它工作超过两行!如果元素是显示块,高度设置为2em或其他,当文本溢出时,它会显示省略号,那就太棒了!

对于单个眼线,您可以使用:

.show-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

对于多行,也许你可以使用Polyfill,如jQuery autoellipsis,这是在github http://pvdspek.github.com/jquery.autoellipsis/上

我以前使用过jquery - condensed -plugin,看起来它可以做你想做的事情。如果不是,有不同的插件可以满足您的需求。

编辑:给你做了一个演示-注意,我在演示中链接了jquery. condene .js,这是有魔力的,所以完全归功于该插件的作者:)

迟回复,但一个html换行也可以,所以你可以做一个html + css唯一的解决方案。所以通常使用br元素是不好的做法,但如果你用br打断了注释,text-overflow省略号将从html文本的下一行开始。