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

效果
请添加图片描述

相关阅读:
linux防火墙设置
HNUCM-2022年秋季学期《算法分析与设计》练习15
【C语言】冒泡排序算法详解
Jansson库中的json_delete函数
leetcode23 合并K个有序列表
响应10毫米内的请求如何处理
C语言03、数组
数据结构线性表部分代码
新概念英语第二册（88）
containerd 镜像构建工具 -- nerdctl 和 buildkit

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