027溢出的文字省略号显示

最新推荐文章于 2025-06-24 09:47:52 发布

原创最新推荐文章于 2025-06-24 09:47:52 发布 · 194 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html5

HTML5 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了如何使用CSS实现单行和多行文本溢出时显示省略号的效果。对于单行文本，通过组合`white-space: nowrap`，`overflow: hidden`和`text-overflow: ellipsis`样式实现；而对于多行文本，利用Webkit私有属性`-webkit-line-clamp`和`-webkit-box-orient`在Webkit浏览器及移动端实现，但存在兼容性问题，建议后台处理。案例中展示了具体代码实现。

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

/*1. 先强制一行内显示文本*/
 white-space: nowrap; （ 默认 normal 自动换行）
 /*2. 超出的部分隐藏*/
 overflow: hidden;
 /*3. 文字用省略号替代超出的部分*/
 text-overflow: ellipsis;

在这里插入图片描述
案例：

<!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>单行文字溢出显示省略号</title>

    <style>
        .box{
            width: 100px;
            height: 200px;
            background-color: green;

            margin: 100px auto;
            /*1. 先强制一行内显示文本*/
            white-space: nowrap; 
            /*2. 超出的部分隐藏*/
            overflow: hidden;
            /*3. 文字用省略号替代超出的部分*/
            text-overflow: ellipsis;            
        }
    </style>
</head>
<body>
    <div class="box">啥也不是,此处省略一万字</div>
</body>
</html>

在这里插入图片描述

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

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

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

案例：

<!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>多行文本溢出显示省略号</title>

    <style>
        .box1{
            width: 100px;
            height: 60px;
            background-color: green;

            margin: 100px auto;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 2;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <div class="box1">来了哦，老弟。会说话就多说点。啥也不是，此处省略一万字。</div>
</body>
</html>

效果：
在这里插入图片描述