文字单行超出:
span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
注意: inline-block元素需要定义固定宽度。
文字多行超出:
span {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
/*超出两行显示省略号*/
overflow: hidden;
}
ie7.8中 超出两行部分隐藏,并没有出现省略号,所以ie中可解决为:
设置两行的包裹box高度,将box设置为overflow:hidden;且position:relative;在包裹box中设置子元素(内容为省略号...)的postion:absolute;bottom:0;right:0;z-index:9;且行高为包裹box的高度一半。
原意为子元素省略号遮盖住box中的内容。
需注意设置子元素的宽度,不要出现字被遮挡一半的效果。