css设计div中超出部分省略号代替
1.只需要显示一行的的情况:
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <style type="text/css"> 5 #one{ 6 width: 320px; 7 overflow: hidden;/*超出部分隐藏*/ 8 white-space: nowrap;/*不换行*/ 9 text-overflow:ellipsis;/*超出部分文字以...显示*/ 10 } 11 </style> 12 </head> 13 <body> 14 <div id="one">title title title title title title title title</div> 15 </body> 16 </html>
2.显示多行的情况：
2.1.如果只需要兼容webkit内核的浏览器：
display: -webkit-box;//-webkit-line-clamp必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 -webkit-box-orient: vertical;//-webkit-line-clamp必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
-webkit-line-clamp: 3; //限制在一个块元素显示的文本的行数
overflow: hidden;
2.2.如果需要兼容多种浏览器：
/*
段落设置为position: relative;以便之后插入的内容相对于段落绝对定位；
通过将max-height设置为line-height的整数倍来限制最大可容纳的行数；
*/
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
/*
:after 选择器在被选元素的内容后面插入内容。
content 属性来指定要插入的内容。
position: absolute; bottom: 0; right: 0;决定省略号相对于父元素的定位。
linear-gradient为颜色线性渐变，具体如下方图片所示。防止文字显示一半。
*/
p:after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(right, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
