CSS基础10-单行/多行文本溢出省略

文本溢出省略

单行文本溢出省略

文本只在一行内显示

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p{
            width: 200px;
            border: 1px solid black;
            overflow: hidden;  /*溢出省略*/
            white-space: nowrap; /*不允许换行*/
            text-overflow: ellipsis; /*省略标识为省略号*/
        }
    </style>
</head>
<body>
    <p>Very quietly I take my leave,As quietly as I came here;Quietly I wave good-bye;To the rosy clouds in the western sky.
        The golden willows by the riverside;Are young brides in the setting sun;Their reflections on the shimmering waves</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

效果
请添加图片描述

多行文本溢出

基于高度截断

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p{
            width: 200px;
            height: 100px;
            border: 1px solid black;
            position: relative;
            overflow: hidden;  /*溢出省略*/
            padding-right: 10px;
            word-break: break-all; /*英文单词换行时进行拆分*/
        }
        P::after{
            content: '...';
            position: absolute; /*追加省略标记并且定位与右下角*/
            right: 0;
            bottom: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <p>Very quietly I take my leave,As quietly as I came here;Quietly I wave good-bye;To the rosy clouds in the western sky.
        The golden willows by the riverside;Are young brides in the setting sun;Their reflections on the shimmering waves</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

效果
请添加图片描述

基于行数截断

使用了chrome浏览器私有属性，对其他浏览器兼容不好

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p{
            width: 200px;
            display: -webkit-box;	/* 必须设置 display 类型为 -webkit-box */
            -webkit-line-clamp: 2;	/* 设置第几行省略 */
            -webkit-box-orient: vertical;	/* 设置其元素垂直布局其内容 */
            overflow: hidden;	/* 溢出省略 */
            word-break: break-all; /*英文单词换行时进行拆分*/
        }
    </style>
</head>
<body>
    <p>Very quietly I take my leave,As quietly as I came here;Quietly I wave good-bye;To the rosy clouds in the western sky.
        The golden willows by the riverside;Are young brides in the setting sun;Their reflections on the shimmering waves</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果
请添加图片描述

相关阅读:
【Pod】
Canal+Kafka实现MySQL与Redis数据同步（二）
Three.js之顶点UV坐标、纹理贴图
将CSV文件快速导入MySQL中
C语言学习概览（四）
【Oracle】分析函数partition by，解决了使用group by后select语句中只能是分组的字段或者是一个聚合函数的问题
为什么感觉越来越穷
你知道Vue3中style新增了哪些特性吗？
河工计院ACM2022寒假培训题单以及超详细题解
MyBatisPlus（八）范围查询

原文地址：https://blog.csdn.net/weixin_64925940/article/details/125471428