css多行省略号和单行省略号

 一 ： css单行省略号

单行溢出，超出部分显示...或者截取。前提必须有宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=å, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div {
        width: 200px;
        padding: 10px;
        box-sizing: border-box;
        height: 100px;
        border: 1px salmon solid;
    }

    div {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>

<body>
    <div>
        陌生人，我也为你祝福
        愿你有一个灿烂的前程
        愿你有情人终成眷属
        愿你在尘世获得幸福
        我只愿面朝大海，春暖花开
    </div>
</body>

</html>

 

 二 ： css多行省略号

　　

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=å, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div {
        width: 200px;
        box-sizing: border-box;
        border: 1px salmon solid;
    }

    div {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
</style>

<body>
    <div>
        陌生人，我也为你祝福
        愿你有一个灿烂的前程
        愿你有情人终成眷属
        愿你在尘世获得幸福
        我只愿面朝大海，春暖花开
    </div>
</body>

</html>

适用范围：

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；
注：
1.-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
2.display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
3.-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式;

 三： 浏览器兼容的方案

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=å, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div {
        position: relative;
        line-height: 1.4em;
        /* 3 times the line-height to show 3 lines */
        width: 252px;
        height: 4.2em;
        overflow: hidden;
    }

    div::after {
        content: "...";
        font-weight: bold;
        position: absolute;
        bottom: 0;
        right: 0;
    }
</style>

<body>
    <div>
        陌生人，我也为你祝福
        愿你有一个灿烂的前程
        愿你有情人终成眷属
        愿你在尘世获得幸福
        我只愿面朝大海，春暖花开
    </div>
</body>

</html>

 

posted @ 2020-07-14 15:26  echo丶若梦  阅读(559)  评论(1)  编辑  收藏  举报