文本内容超出父元素一行或多行省略号代替

最新推荐文章于 2024-03-12 13:07:22 发布

weixin_34033624

最新推荐文章于 2024-03-12 13:07:22 发布

阅读量351

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zyl-930826/p/8649386.html

版权

单行文本溢出省略号
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本溢出：

第一种：

.news_list li .news_text p{

line-height: 25px;
max-height: 50px;/* 行高与显示行数的乘积 */

/*火狐不出现省略号，而是隐藏*/

word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;/** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical;/** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 2;/** 显示的行数 **/
overflow: hidden; /** 隐藏超出的内容 **/

}

多行文本溢出省略号

.news_list li .news_text p{

/*要想兼容火狐，IE，除了一下兼容代码外，要设置行高和最大高*/

position: relative;
line-height: 25px;
max-height: 50px;

/*不兼容火狐，IE*/

}

/*兼容火狐,ie9及以上*/
.news_list li .news_text p::after {
   /*content: "...";*/
   content: "";
   position: absolute;
   bottom: 0;
   right: 0;
   padding-left: 40px;
   background: -webkit-linear-gradient(left, 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%);
}

/*兼容ie8*/
.news_list li .news_text p:after {
   /*content: "...";*/
   content: "";
   position: absolute;
   bottom: 0;
   right: 0;
   padding-left: 40px;
   background: -webkit-linear-gradient(left, 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%);
}