CSS中的文本溢出省略

原创已于 2025-03-24 18:20:02 修改 · 2.6k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #文本溢出

于 2025-03-24 00:47:58 首次发布

前端同时被 2 个专栏收录

342 篇文章

订阅专栏

CSS+HTML5

27 篇文章

订阅专栏

CSS中的文本溢出省略

1.前言
2.单行文本溢出省略
3.多行文本溢出省略
- 3.1 基于高度截断
- 3.2 基于行数截断

1.前言

在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号。对于文本的溢出，我们可以分成两种形式：

单行文本溢出
多行文本溢出

2.单行文本溢出省略

理解也很简单，即文本在一行内显示，超出部分以省略号的形式展现。实现方式也很简单，涉及的css属性有：

text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本
text-overflow只有在设置了overflow:hidden和white-space:nowrap才能够生效的
white-space：设置文字在一行显示，不能换行
white-space:nowrap，作用是设置文本不换行，是overflow:hidden和text-overflow：ellipsis生效的基础
overflow：文字长度超出限定宽度，则隐藏超出的内容
overflow设为hidden，普通情况用在块级元素的外层隐藏内部溢出元素，或者配合下面两个属性实现文本溢出省略

text-overflow属性值有如下：

clip：当对象内文本溢出部分裁切掉
ellipsis：当对象内文本溢出时显示省略标记（…）

下面是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        p{
            line-height: 40px;
            width:400px;
            height:40px;
            border:1px solid red;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
  <p>大数据时代急急急洒基阿萨凯撒卡萨卡萨文字这是一段很长的颠三倒四大数据时代急急急洒基阿萨凯撒卡萨卡萨文字这是一段很长的
      颠三倒四大数据时代急急急洒基阿萨凯撒卡萨卡萨文字这是一段很长的颠三倒四大数据时代急急急洒基阿萨凯撒卡萨卡萨文字这是一段
      很长的颠三倒四大数据时代急急急洒基阿萨凯撒卡萨卡萨文字这是一段很长的颠三倒四大数据时代急急急洒基阿萨凯撒卡萨卡萨文字这
      是一段很长的颠三倒四大数据时代急急急洒基阿萨凯撒卡萨卡萨文字这是一段很长的颠三倒四大数据时代急急急洒基阿萨凯撒卡萨卡萨文字</p>
</body>
</html>

在这里插入图片描述

3.多行文本溢出省略

3.1 基于高度截断

.box {
    position: relative;
    line-height: 20px;
    height: 40px;
    overflow: hidden;
}
.box::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 5px 0 5px;
    /*background-color: #ffffff;*/
    background-color: #d9534f;
}

<div class='box'>这是一段很长的颠三倒四大数据时代急急急洒基阿萨凯撒卡萨卡萨文bvbvbvvbvdfdfdsvf
sdsddsdsadssaasashsadhsadhdashasdahdshadsbasdbadsbadsdsds字这是一段很长的颠三倒四大数据时代急
急急洒基阿萨凯撒卡萨卡萨文字这是一段很长的颠三倒四大数据时代急急急洒基阿萨凯撒卡萨卡萨文字这
是一段很长的颠三倒四大数据时代急急急洒基阿萨凯撒卡萨卡萨文字这是一段很长的颠三倒四大数据时代
急急急洒基阿萨凯撒卡萨卡萨文字这是一段很长的颠三倒四大数据时代急急急洒基阿萨凯撒卡萨卡萨文字
这是一段很长的颠三倒四大数据时代急急急洒基阿萨凯撒卡萨卡萨文字这是一段很长的颠三倒四大数据时
代急急急洒基阿萨凯撒卡萨卡萨文字</div>

在这里插入图片描述

3.2 基于行数截断

纯css实现也非常简单，核心的css代码如下：

-webkit-line-clamp: 2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性）
display: -webkit-box：和1结合使用，将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical：和1结合使用，设置或检索伸缩盒对象的子元素的排列方式
overflow: hidden：文本溢出限定的宽度就隐藏内容
text-overflow: ellipsis：多行文本的情况下，用省略号“…”隐藏溢出范围的文本

p{
    width: 400px;
    border: 1px solid red;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
}

  <p>大数据时代急急急洒基阿萨凯撒卡萨卡萨文字这是一段很长的颠三倒四大数据时代急急急洒基阿萨凯
  卡萨卡萨文字这是一段很长的颠三倒四大数据时代急急急洒基阿萨凯撒卡萨卡萨文字这是一段很长的颠三
  倒四大数据时代急急急洒基阿萨凯撒卡萨卡萨文字这是一段很长的颠三倒四大数据时代急急急洒基阿萨凯
  撒卡萨卡萨文字这是一段很长的颠三倒四大数据时代急急急洒基阿萨凯撒卡萨卡萨文字这是一段很长的颠
  三倒四大数据时代急急急洒基阿萨凯撒卡萨卡萨文字这是一段很长的颠三倒四大数据时代急急急洒基阿萨
  凯撒卡萨卡萨文字</p>