css怎么设置文字个数溢出,css实现文本溢出显示省略号...

1.单行文本溢出

满足：设置宽度，强制不换行，超过的部分隐藏，text-overflow: ellipsis;

文本溢出

body{

width:500px;

margin:0 auto;

padding-top:50px;

}

div{

white-space:nowrap;

width:100px;

overflow: hidden;

text-overflow: ellipsis;

}

彼时年少，不知前路何谓艰苦，于是对未来充满热情，希望，而时间如白驹过隙，

转眼间已经步入了灵魂，也渐渐的适应了这样的生活。但是以前的梦想啊渐渐的偏离了我的轨道，

感慨岁月如刀，削平了我们的棱角。在茫茫人海中不卑不亢，小心翼翼的前行，再也不敢平淡挫折态度

2.多行文本溢出

width:300px;

display: -webkit-box;

-webkit-box-orient: vertical;

//限制显示的行数

-webkit-line-clamp: 3;

overflow: hidden;

这个属性比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器。

3.跨浏览器兼容的多行文本溢出

div{

/*超出3行显示省略号...*/

position: relative;

top:0;

left:0;

width:300px;

line-height:25px;

height: 75px;

overflow: hidden;

}

div:after{

content:"...";

position:absolute;

bottom:0;

right:0;

}

注意：height=line-height*显示的行数(例如显示三行，如果line-height:25px; height:75px)