设置多行文本超出显示省略号,在手机端超出部分无法隐藏解决方法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34645412/article/details/78693472

方法一:

跨浏览器兼容的方案

比较靠谱简单的做法就是设置相对定位的容器高度,用包含省略号(…)的元素模拟实现;

p{
  position:relative;
  line-height:1.4em;
  /* 3 times the line-height to show 3 lines */
  height:4.2em;
  overflow:hidden;
}

p::after{
  content:"...";
  font-weight:bold;
  position:absolute;
  bottom:0;
  right:0;
  padding:020px1px45px;
  background:url(http://newimg88.b0.upaiyun.com/newimg88/2014/09/ellipsis_bg.png) repeat-y;
}

但是效果不好看

方法二:

overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient: vertical;

但是会出现BUG,会出现超出部分溢出不影藏

结果:我综合了两种方法如下。给给定换行数,同时给定高度和行高限制。

html:

<div class="caption">
  <p>显示超过两行就显示省略号,其余隐藏,隐藏不了的情况下给这个模块添加一个高度和行高
,高度是行高的两倍</p>
</div>
css:

.caption {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #999999;
  line-height: 15px;//
  height:30px;///* 2行隐藏就两倍,三行隐藏就三倍*/
}

没有更多推荐了,返回首页