出现两列省略号。。。显示,文本溢出超出行数默认2行

最新推荐文章于 2022-02-14 16:47:42 发布

470368525

最新推荐文章于 2022-02-14 16:47:42 发布

阅读量184

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_45217584/article/details/101456660

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=100%, initial-scale=1.0, user-scalable=no"/>
<meta content="telephone=no" name="format-detection" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>腾讯新闻</title>
<body>
     <ul class="ulRelNews">
         <li class="singlePicLi" url="">
             <div class="singlePic"><img src="http://inews.gtimg.com/newsapp_ls/0/57068827_150120/0" style="width: 100%; margin-top: 0px;"></div>
             <div class="singlePicRight">
                  <p class="titleHot"> 奥巴马与库里阿伦打高尔夫</p>
                  <span class="relSrc time_need_reform">8月16日</span>
                  <sapn class="relSrc">腾讯体育</sapn>
             </div>
         </li>
      </ul>
</body>
</html>

CSS代码为：

.ulRelNews ul{padding:10px;}
.ulRelNews li{ list-style: none; border-bottom: 1px solid #e4e5e7; padding: 10px 0; font-size: 0; overflow: hidden;}
.singlePic{ width: 75px; height: 60px; margin-right: 10px; float:left;}
.singlePicRight{ display: table-cell; vertical-align: middle; width: 100%; height: 60px;}
.titleHot{ margin: 0 0 4px; font-size: 16px; font-weight: 700; color: #47494c; line-height: 20px; overflow: hidden; word-break:break-all;-webkit-line-clamp:2;-webkit-box-orient:vertical; display: -webkit-box;}
.relSrc{ font-size: 13px; color: #8d8d8d; margin-right: 10px;}

第二种方式：超过两行出现。。。

.title{
    color:#333;
    font-size:0.45333rem;
    min-height:0.64rem;
    line-height:0.64rem;
    padding:0.34666rem 0 5px;
    word-break: break-all;
    .line-clamp(2)
  }
// 文本溢出超出行数 默认2行
.line-clamp(@line:2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: @line;
}

470368525

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
出现两列省略号。。。显示,文本溢出超出行数默认2行

<!DOCTYPE HTML><html><head><meta charset="utf-8"/><meta name="viewport" content="width=100%, initial-scale=1.0, user-scalable=no"/><meta content="telephone=no" na...
复制链接

扫一扫