单行或多行文字溢出用省略号替代

最新推荐文章于 2023-04-17 11:32:23 发布

yi把菜刀

最新推荐文章于 2023-04-17 11:32:23 发布

阅读量818

点赞数 1

分类专栏： CSS 前端学习

本文链接：https://blog.csdn.net/VAEaaaa/article/details/111413205

版权

前端学习同时被 2 个专栏收录

22 篇文章 2 订阅

订阅专栏

CSS

14 篇文章 0 订阅

订阅专栏

CSS苦逼学习日记（9）

当一个文本框的大小装不下我们所需要的文字的时候，就自然会用到省略号，

下图的为淘宝的省略号部分就是当文字溢出时用省略号表示。

那么我们应该怎么才能做到这样的效果呢？

下面为如何使用此方法：

1.单行的文字溢出用省略号表示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            text-decoration: none;
        }
        div {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            /* 如果文字显示不开会自动换行 */
            /* white-space:normal */
            white-space: nowrap;
            /* 溢出的部分隐藏起来 */
            overflow:hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>
        <a href="">我就是也不说，此处省略一万个字</a>
    </div>
</body>
</html>

最主要的代码块：

            white-space: nowrap;
            /* 溢出的部分隐藏起来 */
            overflow:hidden;
            text-overflow: ellipsis;

1.white-space：
正常情况下是 white-space =normal; 此时表示的是如果文字显示不开，则会自动换行。
但我们需要不换行，则需要：white-space= nowrap; 此式表达的是不换行。

2.overflow:hidden: 因为不换行，文字超过了容器盒子，会在盒子外部显示，则需要把超出的部分隐藏掉，则使用此式。

3.text-overflow:ellipsis: 此式表达的是超出文本的地方用 省略号表示，ellipse 的意思就是省略号的意思，此式极为重要，是转化为省略号的关键。

下图为上述代码的运行结果：

2.多行文字溢出用省略号表示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 150px;
            height: 65px;
            margin: 100px auto;
            background-color: pink;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;

        }
    </style>
</head>
<body>
    <div>
        啥也不说，我就是你大哥，然后此处肯定要省略一万个字啊哈哈哈哈
    </div>
</body>
</html>

代码最主要的部分：

            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;

其中 overflow: hidden; 和 text-overflow: ellipsis; 与单行省略的解释一致；

-webkit-line-clamp: 3; 表示的是在第几行的末尾超出的部分用省略号来表示。数字3就为第三行末尾开始用省略号表示

-webkit-box-orient: vertical; 和 display: -webkit-box; 背一背熟悉就行

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

多行的显示注意事项：

进行多行文字溢出用省略号代替时一定要控制好文本的长和宽，不然会出现以下情况：

解释：
虽然我们设置是在第三行进行省略号代替，但是因为盒子的高度足以装下4-5行甚至更多的文字，所以就在下方继续显示我们的文字，最后，注意：

一定要设置好我们盒子的高度和宽度，使得多的文字不会显示出来！

yi把菜刀

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
单行或多行文字溢出用省略号替代

当一个文本框的大小装不下我们所需要的文字的时候，就自然会用到省略号，下图的为淘宝的省略号部分就是当文字溢出时用省略号表示。那么我们应该怎么才能做到这样的效果呢？下面为如何使用此方法：1.单行的文字溢出用省略号表示：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev
复制链接

扫一扫

专栏目录