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

http://view.inews.qq.com/w/WXN201508190483330M0?refer=nwx&groupid=1439978570&msgid=0&key=dffc561732c2265139530866aa8483be53175d099f27d5e8525e87892ffc2808286a681737da9b7f8941deb42b86dae6&version=61020020&devicetype=Windows+7&cv=0x61020020&dt=15&lang=zh_CN&pass_ticket=2e7gkAQC6ZKQpjYUpFdqb9rgUBwRBOQlkhkAGrKMpwpXz5otb8VqBEvxBtsnU%2Bag&isShare=1&from=timeline&isappinstalled=0&openid=o04IBAElqm7_pUbVYRYz6_VZREO8

 

<!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;
}

 

posted @ 2015-08-19 23:06  chenguiya  阅读(382)  评论(0)    收藏  举报