省略号的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>省略号的使用</title>
    <!-- 通过css样式跳出省略号 -->
    <style>
        /* 单行出现省略号 */
        .boxEllipsis{
            width: 100px;
            height: 30px;
            border: 1px solid red;
            line-height: 30px;
            overflow: hidden;
            /*设置内容不换行 */
            white-space: nowrap; 
            /* 设置超出内容为省略号 */
            text-overflow: ellipsis;
        }
        /* 多行出现省略号 */
        /* 
            适用范围： 因使用了webkit的css扩展属性，改方法适用于 webkit 浏览器及移动端
            -webkit-line-clamp:2 用来限制在一个块儿元素显示的文本行数，为实现该效果必须结合其他的webkit属性 以下：
                display:-webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
                -webkit-box-orient:vertical 必须结合的属性，设置或检索伸缩盒子对象的子元素的排列方式
                orient : 确定方向 ， 东方
                vertical : 垂直的
         */
        .moreEllipsis{
            width: 100px;
            height: 40px;
            border: 1px solid red;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:2;
        }
        /* 通过js判定指定的字符（判断有几个字符串 显示省略号） */
        .jqEllipsis{
            width: 100px;
            height: 30px;
            border: 1px solid red;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <div class="boxEllipsis">
        这里面是一段单行省略号使用的文字
    </div>
    <div class="moreEllipsis">
        这里面是一段多行文字出现省略号使用的文字
    </div>
    <div class="jqEllipsis">
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
            var str = '这里有一段文字需要显示'
            var s = str
            if(str.length >= 5){
                // substring() 方法用于提取字符串中介于两个指定下标之间的字符。
                // stringObject.substring(start,stop)
                s = str.substring(0,5) + "..."
            }
           $(".jqEllipsis").html(s)
    </script>
</body>
</html>
猜你喜欢
