地狱猫

单行文本溢出省略展示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
      .box{
        width: 100px;
        height:100px;
        background-color: yellow;
        
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    </style>
</head>
<body>
    <div class="box">决定了撒娇发生的纠纷的旅客撒风就是打开了发酵法老师就是看鹿鼎记法兰克福队啊就哭了撒娇的法兰克福家就阿克琉斯的飞机啊六块腹肌剪短发萨里看见发生了饭；就叫啊浪费的空间啊螺蛳粉就是打开啦放假的时间卡的服务 i 哦额如视频点击</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

效果图

多行文本溢出省略展示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
      .box{
        width: 100px;
        background-color: yellow;
        border:1px solid #ccc;

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height:30px;
        height:60px;
      }
    </style>
</head>
<body>
    <div class="box">决定了撒娇发生的纠纷的旅客撒风就是打开了发酵法老师就是看鹿鼎记法兰克福队啊就哭了撒娇的法兰克福家就阿克琉斯的飞机啊六块腹肌剪短发萨里看见发生了饭；就叫啊浪费的空间啊螺蛳粉就是打开啦放假的时间卡的服务 i 哦额如视频点击</div>
</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

效果图

强制换行

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
      .box{
        width: 100px;
        height:100px;
        background-color: yellow;
        word-wrap: break-word;
        word-break: break-all;
      }
    </style>
</head>
<body>
    <div class="box">111111111111111111111111111</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

← 对JS上下文栈和作用域链的理解→