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解决方案是不存在的。 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。