css文本超出隐藏显示省略号 实现一行两行多行

css文本超出隐藏显示省略号 实现一行两行多行

看似十分简单的标题截断效果，但是竟然没有一个统一 CSS 属性实现标准，需要用到一些奇淫妙计来实现，一般来说，在做这样文字截断效果时我们更多是希望：

• 兼容性好，对各大主流浏览器有好的支持

• 响应式截断，根据不同宽度做出调整

• 文本超出范围才显示省略号，否则不显示省略号

• 省略号位置显示刚好

• 基于上述的准则，下面我就讲介绍各种技巧实现截断效果

一行省略实现,用css:

overflow:hidden; //超出文本隐藏
 
white-space:nowrap; //溢出不换行
 
text-overflow:ellipsis; //溢出省略号显示

属性浏览器原生支持，各大浏览器兼容性好，缺点就是只支持单行文本截断，并不支持多行文本截取。

适用场景：单行文字截断最简单实现，效果最好，放心使用。

如果是多行文字截取效果，实现起来就没有那么轻松。

-webkit-line-clamp 实现

两行或多行省略实现,用css3:

<div class="info">
            <p style="max-width: 6.9rem;display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;" v-if="v.CaseSystem">
              {{v.FaultDescription}}
            </p>
            <!-- 技术通告描述 -->
            <p style="max-width: 6.9rem;display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;" v-if="v.TPISystem">
              {{v.Detail}}
            </p>
          </div>

overflow:hidden; //超出文本隐藏

text-overflow:ellipsis; //溢出省略号显示

display:-webkit-box; //将对象作为弹性伸缩盒子

-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式-从上到下垂直排列

-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，数组代表显示的行数,如2,3,4....

原理是超出第二行就增加三个点点点,后面的内容依然输出页面,只是超出隐藏了

----------------------------------------------------------------------------------------------------------------------------------------

<div>
    <!-- <Top-Warning :w-msg="wmsg" :r-msg="rmsg"></Top-Warning> -->
    <div class="home-list">
      <ul>
        <li class="item" v-for="item of list" :key='item.id'>
          <img class="home-img" :src="item.imgUrl" alt="">
          <div class="home-info">
            <div class="home-desc" style="max-width: 5.62rem;display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;">
              {{item.desc}}
            </div>
            <span class="home-chakan">
              <em>2981</em>
              <img src="../../assets/img/home/home-liulanliang.png" alt="">
            </span>
          </div>
        </li>
      </ul>
      <div class="kong-div"></div>
    </div>
  </div>

max-width: 5.62rem;display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;

复制即可使用。