mark一个文字多出部分省略号显示的方法
一、如果只有一行可以使用如下方法
<style>
#test{
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
}
</style>
width是必须属性(不然哪里知道一行有多长...)
white-space:nowrap的意思是不换行,另外该属性还有可能的值normal,pre,pre-wrap,pre-line,inherit
text-overflow:ellipsis的意思为使用省略号代替修剪的文本,另外该属性还有可能的值clip,string
支持低版本的opera一个办法,就是-o-text-overflow:ellipsis
ps:该方法只能支持超过一行时候显示省略号
二、多行文本时,末尾显示省略号
<style>
.vipText{
height: .2rem;
width: .97rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:1;
-webkit-box-orient: vertical;
}
</style>
要显示几行就把-webkit-line-clamp:1;后面的值改成几就行,此处需要注意的是高度和宽度是必须的值。
另外该方法对于火狐浏览器并不支持....可以考虑在火狐中就使用overflow:hidden...省略号什么的好像也没那么重要嘛~