CSS文本溢出显示省略号怎么实现？

最新推荐文章于 2024-09-19 08:00:00 发布

Moony (考研版)

最新推荐文章于 2024-09-19 08:00:00 发布

阅读量580

点赞数

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/Moony_wy/article/details/122758428

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言

我们经常会遇到网页中有文字溢出会显示省略号，那么这种效果怎么实现呢？本文分别介绍了单行文本溢出显示省略号和多行文本溢出显示省略号的实现方法。

一、单行文本溢出显示省略号

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 150px;
            height: 100px;
            border: 1px solid grey;
            margin: 100px auto;
            /* 强制单行显示 */
            white-space: nowrap;
            /* 溢出的部分隐藏 */
            overflow: hidden;
            /* 文字用省略号代替超出部分 */
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <!-- 单行文本显示省略号 -->
    <div>此处省略一万字，我是看不见的</div>
</body>

</html>

效果如图：

主要代码为：

/* 强制单行显示 */

white-space: nowrap;

/* 溢出的部分隐藏 */

overflow: hidden;

/* 文字用省略号代替超出部分 */

text-overflow: ellipsis;

二、多行文本溢出显示省略号

* 多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webKit内核）

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 150px;
            margin: 100px auto;
            border: 1px solid grey;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 2;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }
    </style>
</head>

<body>
    <!-- 多行文本显示省略号 -->
    <div>这一节主要讲了多行文本溢出时怎么显示为省略号</div>
</body>

</html>

效果如图：

主要代码为：

overflow: hidden;

text-overflow: ellipsis;

/* 弹性伸缩盒子模型显示 */

display: -webkit-box;

/* 限制在一个块元素显示的文本的行数 */

-webkit-line-clamp: 2;

/* 设置或检索伸缩盒对象的子元素的排列方式 */

-webkit-box-orient: vertical;