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

关注

原创最新推荐文章于 2026-04-12 11:19:22 发布 494 阅读 AI 写同款· GEO 优化 ›

CSS 单行、多行文本溢出处理，纯css实现文本展开 / 收起在网页布局和样式设计中，处理文本溢出是一个常见的需求。为了在单行或多行文本过长时处理溢出情况，CSS 提供了几个有用的属性。本文将介绍如何使用这些 CSS 属性来处理文本溢出问题，包括单行和多行的情况。用于记录展开或收起的状态，它是这个功能的核心。限制块级元素显示的行数，这里限制为 3 行。设置或检索伸缩盒对象的子元素的排列方式。这是一个很长的文本，用于演示单行文…强制文本在一行内显示，禁止换行。的状态来实现类似的功能。超出容器的部分将被隐藏。这是一个很长的文本，用于。演示多行文本溢出时的省略。阅读详情

单行溢出的处理比较简单，两三行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来实现。