CSS中单行、多行溢出处理（考虑兼容问题）

最新推荐文章于 2025-03-24 00:47:58 发布

MrTech

最新推荐文章于 2025-03-24 00:47:58 发布

阅读量416

点赞数

文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/MrTech/article/details/129333778

版权

文章介绍了如何使用CSS处理文本溢出，包括单行溢出时隐藏并添加省略号，以及针对webkit内核浏览器的多行溢出解决方案。对于多行溢出的兼容性处理，文章提供了一种利用额外元素和负margin的方法，并指出在字数不足时，可能需要JS辅助实现省略号的隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单行溢出的处理比较简单，两三行css代码即可实现：

.box {
    width: 300px;
    overflow: hidden;//溢出部分隐藏
    white-space: nowrap;//不换行
    text-overflow: ellipsis;//添加省略号
    border: 2px solid black;
  }

上面的样式实现效果如下：

单行溢出

多行溢出的情况：

首先是webkit内核（移动端浏览器多数是webkit内核）的浏览器的实现方式：

.box {
    width: 300px;
    overflow: hidden;
    display: -webkit-box;//设置块元素为伸缩布局
    -webkit-box-orient: vertical;//设置伸缩项的布局方向
    -webkit-line-clamp: 2;设置文本行数
    border: 2px solid black;

  }

这种方式就是缺乏兼容性。

下面是兼容性的方式：

<style>
    .box {
      height: 160px;
      width: 1000px;
      border: 2px solid black;
      overflow: hidden;
    }

    .box .hh {
      content: '';
      display: block;
      height: 140px;
    }

    .content {
      line-height: 20px;
      margin-top: -140px;
    }

    .box .more {
      float: right;
      line-height: 1;
      margin-right: 1em;
    }
  </style>
<div class="box">
    <div class="hh"></div>
    <div class="more">...</div>
    <div class="content">
      多行溢出，考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容；
      多行溢出考虑兼容；多行溢出考虑兼容
    </div>
  </div>

上面的只是实现了样式的省略，当字数达不到省略的字数时，“...”隐藏的实现，需要通过js来实现。