| HTML, CSS, 打点

关于文字溢出打点方法

其实在我们页面布局中，会遇到关于文字溢出需要打省略号的一个问题，常规的做法是利用CSS来解决，或者使用第三方的库来解决，我们也可以封装一个JS来解决，下面我将分别介绍这几种方法是如何解决文字溢出的问题。

  1. 方法一：使用CSS来解决
    a. 单行文字溢出：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        .container{
            width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;  /*显示省略符号来代表被修剪的文本*/
        }
        </style>
    </head>
    <body>
        <div class="container">我是单行文字我是单行文字</div>
    </body>
    </html>

    得到的内容如下所示：
    单行文字打点所得内容
    b. 多行文字溢出：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        .container{
            width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box; /*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
            -webkit-line-clamp: 4; /*行数*/
            -webkit-box-orient: vertical; /*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
        }
        </style>
    </head>
    <body>
        <div class="container">我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字</div>
    </body>
    </html>

    得到的内容如下所示：
    多行文字打点不兼容所得内容
    需要注意：在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
    c. 为了解决b中多行文字溢出的一个兼容性问题，因此我们可以设置相对定位的容器高度，用包含省略号(…)的元素模拟实现（跨浏览器兼容方法）

    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
    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        .container{
            position: relative;
            line-height: 1.5em;
            height: 3em;  /* 高度为需要显示的'行数*行高'，比如这里我们显示两行，则为3 */
            overflow: hidden;
        }
        .container::after{
            content: "...";
            position: absolute;
            bottom: 0;
            right: 0;
            padding:0 5px;
        }
        </style>
    </head>
    <body>
        <div class="container">我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字
            我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我</div>
    </body>
    </html>

    得到的内容如下图所示：
    多行文本溢出兼容性所得内容
    但是这种写法我们还是需要注意：1. 需要知道显示的行数并设置行高才行；2. 省略号的背景颜色跟文本背景颜色一样，并且可能会遮住部分文字，建议可以使用渐变的png背景图片代替；3. IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用…去模拟；4. 要支持IE8，需要将::after替换成:after。

  2. 方法二：使用第三方的库来解决
    a. jQuery的插件: jQuery.dotdotdot
    b. Clamp.js

  3. 方法三：自己手动封装一个js的溢出打点方法

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
32
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .container{
        width: 150px;
    }
    </style>
</head>

<body>
    <div class="container">我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字</div>
    <script>
       function ellipsis(num){   // 指定多少个字就截断打点
           let container = document.getElementsByClassName("container")[0];
           let count = container.innerHTML;
           let len = count.length;
           if(len > num){
               let new_count = count.split("").splice(0,num).join("") + "...";
               container.innerHTML = new_count;
           }else{
               container.innerHTML += "...";
           }
       }
       ellipsis(15);
    </script>
</body>

</html>

得到的内容如下图所示：
用js封装的打点结果所示
本文章参考：
https://www.html.cn/archives/5206