logo头像

实现技术的弯道超车

使用文字省略号的几种情况

前端 css 2019/05/12

text-overflow: ellipsis; 解决方案

说明：需要配合 white-space: nowrap; overflow: hidden; 使用。

单行使用：

1
2
3
4
5
.text-deal{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <style>
    .text-deal{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    </style>
</head>
<body>
<div class="text-deal">
    这是一个有效果的文字超出用省略号代替的例子，你看可以吗？
</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
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <style>
    .parent{
        display: flex;
    }
    .children{
        flex: 1;
        min-width: 0; /*这一句起作用*/
    }
    .text-deal{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    </style>
</head>
<body>
<div class="parent">
    <div class="children">
        <div class="text-deal">
            这是一个有效果的文字超出用省略号代替的例子，你看可以吗？
        </div>
    </div>
</div>
</body>
</html>

不只是min-width属性可以，width属性也可以，并且值可以是任意。

多行使用：

1
2
3
4
5
6
7
.text-deal{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 显示多少行开始省略 */
    -webkit-box-orient: vertical;
}

示例：

1
2
3
4
5
6
7
<h3>普通多行使用</h3>
<div class="parent">
    <div class="children">
        <div class="text-deal"> A an a  boy,and you.A an a  boy,and you.A an a  boy,and you.A an a  boy,and you. </div>
        <div class="text-deal">省略号不起作用省略号不起作用省略号不起作用省略号不起作用省略号不起作用省略号不起作用省略号不起作用省略号不起作用省略号不起作用省略号不起作用</div>
    </div>
</div>

特殊情况使用：

1
2
3
4
5
6
7
8
.text-deal{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all; /* 追加这一行代码 */
}

示例：

1
2
3
4
5
6
7
<h3>特殊情况多行使用</h3>
<div class="parent">
    <div class="children">
        <div class="text-deal">111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
        <div class="text-deal"> aasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsd</div>
    </div>
</div>

部分资料来自网络，如有侵权，联系删除。转载请注明出处！

赏
支付宝打赏 微信打赏

赞赏是不耍流氓的鼓励

转载声明：商业转载请联系作者获得授权,非商业转载请注明出处 © zszq
Copyright © 2019.1.24 | Powered by Hexo | Theme by Snippet