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 ... 

当前回答

正如其他人已经回答的那样,纯CSS解决方案是不存在的。 jQuery有一个非常好用的插件,它叫dotdotdot。 它使用容器的宽度和高度来计算是否需要截断和添加省略号。

$("#multilinedElement").dotdotdot();

这是一个jsFiddle。

其他回答

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

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

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

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

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

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

它是一个非标准的CSS,当前版本的CSS中没有涵盖它(Firefox不支持它)。尝试使用JavaScript。

我发现Skeep的回答是不够的,还需要一个溢出样式:

overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;

正如其他人已经回答的那样,纯CSS解决方案是不存在的。 jQuery有一个非常好用的插件,它叫dotdotdot。 它使用容器的宽度和高度来计算是否需要截断和添加省略号。

$("#multilinedElement").dotdotdot();

这是一个jsFiddle。