css3中设置文本段落溢出隐藏并追加省略号

 

总结：包裹文本的标签必须为块元素，不能靠内容撑开 因为溢出隐藏（总得有个边界触发溢出😀）

使用：

　　　　　　 white-space: nowrap; /*设置不换行*/

　　　　　　overflow: hidden; /*设置溢出隐藏*/

　　　　　　text-overflow:ellipsis; /*文本隐藏触发事件：设置省略号*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            width: 100px;
            height: 20px;
            display: block;
            border: 1px solid red;
            white-space: nowrap; /*设置不换行*/
            overflow: hidden;  /*设置溢出隐藏*/
            text-overflow:ellipsis;  /*文本隐藏设置省略号*/
        }
    </style>
</head>
<body>
<span>万事如意学习如意生活如意赚钱赚钱如意睡觉如意如意如意</span>
</body>

</html>

 

posted @ 2020-08-08 22:27  幽悠又  阅读(407)  评论(0)  编辑  收藏  举报