多行省略的展开与收起

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：
本文字数： 1.4k | 阅读时长 ≈ 1 分钟

“展开"与"收起”

006tNc79gy1g2499eal3oj310i0hw18m

当字数多到一定程度就显示省略号点点点。最初只是简单的点点点，之后花样越来越多，点点点加下箭头，点点点加更多，点点点加更多加箭头…。多行省略就是大段文字后面的花式点点点。

而我实现的是这样的:

006tNc79gy1g249clv9nmj30fi07ywfu

006tNc79gy1g249d349i2j30fe0cudid

实现代码:

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import React, {Component} from 'react';

class Ellipsis extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
    };
  }

  toggleShow = () => {
    this.setState((state) => ({
      show: !state.show,
    }));
  }

  render() {
    const { show } = this.state;
    return(
      <div className={'ellipsis' + (show ? '' : ' show' )}>
        <style jsx>{`
          /*
          * 行高 h
          * 最大行数 n
          * ...更多容器的宽 w
          * 字号 f
          */
        
        .ellipsis {
            position: relative;
            background: rgb(230, 230, 230);
            width: 260px;
            text-align: justify;
            max-height: unset;
            line-height: 18px; /* h */
            
        }

        .ellipsis.show {
          max-height: 108px; /* h*n */
          overflow: hidden;
        }

        .ellipsis-container {
            position: relative;
            display:  ${show ? 'block' : '-webkit-box'};
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 6; /* n */
            font-size: 65px; /* w */
            color: transparent;
        }

        .ellipsis-content {
            color: #000;
            display: inline;
            vertical-align: top;
            font-size: 12px; /* f */
        }

        .ellipsis-ghost {
            position:absolute;
            z-index: 1;
            top: 0;
            left: 50%;
            width: 100%;
            height: 100%;
            color: #000;
        }

        .ellipsis-ghost:before {
            content: "";
            display: block;
            float: right;
            width: 50%;
            height: 100%;
        }

        .ellipsis-placeholder {
            content: "";
            display: block;
            float: right;
            width: 50%;
            height: 108px; /* h*n */
        }

        .toggle-button {
            float: right;
            font-size: 12px; /* f */
            width: 50px; /* w */
            height: 18px; /* h */
            margin-top: -18px; /* -h */
            opacity: 0.5;
            
        }

        .toggle-button.showbutton {
          position: absolute;
          bottom: -18px;
          left: 50%;
          margin-left: -50px;
        }
        `}</style>
        <div className="ellipsis-container">
            <div className="ellipsis-content">AICoin，全球数字资产行情数据应用领跑者，致力于更高效地							提供有价值的信息，提升资产管理的效率。AICoin ，拥有全面而优质的数字资产资源，自 2013 年以								来，深耕细作，为用户提供实时行情、专业K线、指标分析、资讯动态等专业的数据服务。AICoin，全球								数字资产行情数据应用领跑者，致力于更高效地提供有价值的信息，提升资产管理的效率。AICoin ，拥								有全面而优质的数字资产资源，自 2013 年以来，深耕细作，为用户提供实时行情、专业K线、指标分								析、资讯动态等专业的数据服务。
          	</div>
            <div className="ellipsis-ghost">
                <div className="ellipsis-placeholder"></div>
                <div className={'toggle-button' + (show ? ' showbutton' : '')}>
                  <span style={{ color: `${show ? 'transparent' : '#000000'}`,
                      paddingRight: '5px',
                    }}
                  >...
                  </span>
                  <span style={{ cursor: 'pointer', color: 'blue' }}
                    onClick={this.toggleShow}
                   >
                    {show ? '[收起]' : '[展开]'}
                  </span>
                </div>
            </div>
        </div>
      </div>
    );
  }
}

export default Ellipsis;

原理详解:

文字溢出截断

文字溢出截断

1
2
3
4
5
6
<!DOCTYPE html><html><body>
<style>@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}/*测试*/</style>
<div style="font-size: 12px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;color: red;line-height: 18px;position: relative;-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);">
    <div style="color:#000;display: inline;vertical-align: top;background: rgb(204, 204, 204);">腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。</div>
</div>
</body></html>

-webkit-line-clamp是webkit内核的私有css属性，用于进行多行省略，在安卓和ios上全支持。但它固定使用省略号，无法直接扩展。而且自带了溢出截断逻辑，作用于容器高度。仔细考察可发现它使用的省略号是单字符…，可以用文字css属性如font-size,letter-spacing,color等控制。

文字溢出截断2

1
2
3
4
5
6
<!DOCTYPE html><html><body>
<style>@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}/*测试*/</style>
<div style="font-size: 36px;letter-spacing: 28px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;color: red;line-height: 18px;position: relative;-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);">
    <div style="color:#000;display: inline;font-size: 12px;vertical-align: top;letter-spacing: 0;background: rgb(204, 204, 204);">腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。</div>
</div>
</body></html>

设置外容器的font-size、letter-spacing、color，并在子容器里恢复就可以单独设置省略号。这里外容器设置font-size的值等于2倍行高（余下要撑开的宽度可用letter-spacing补足，也可仅用font-size撑开全部的宽度），color:transparent可以让line-clamp既挤出文字又不截断容器高度，外容器高度达到7行而不是默认表现的6行，从而达到需要的溢出截断效果

实现详解:

首先写个省略号的容器<div className="ellipsis-container">

image-20190416110711099

省略号容器的样式要注意的一点是,font-size的值要足够大,以至于有足够空间让你放下"…[展开]", 而"…[展开]"只遮住了省略号的空间, 这样就不会出现遮住半个字的现象(此现象会有点丑):

1
2
3
4
5
6
7
8
.ellipsis-container {
            position: relative;
            display:  ${show ? 'block' : '-webkit-box'};
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 6; /* n */
            font-size: 65px; /* w */
            color: transparent;
        }

接下来是正文的div(<div className="ellipsis-content">), 它的高度就只文本的全高度:

image-20190416111720814

然后是设置"…[展开]“和”[收起]"的div:

image-20190416112009101

image-20190416112039123

先把.ellipsis-ghost右移到.ellipsis-container的一半位置, 然后.ellipsis-ghost::before的高度要与.ellipsis-ghost的高度保持一致, 而.ellipsis-ghost的高度是与它的父级元素(.ellipsis-container)的高度保持一致的, 又因.ellipsis-container的高度是被.ellipsis-content的文本撑开的高度, 因此, .ellipsis-ghost::before的高度其实是与文本的高度保持一致的

image-20190416112111232

image-20190416112154542

接着把.ellipsis-placeholder的高度设置为最小文本的呈现高度(.ellipsis的max-height), 如果文本高度大于max-height, 由于右浮动的原理, 且.ellipsis-ghost:before的高度大于.ellipsis-placeholder的高度, 则可以把"…[展开]"显示出来, 如上显示;

如果文本高度小于或等于max-height, 则 .ellipsis-ghost:before的高度小于或等于.ellipsis-placeholder的高度, 那么"…[展开]"则会飘走而不显示, 如下:

image-20190416115537471

image-20190416115552162

image-20190416115610657

最后可以在.toggle-button里设置一个点击事件来控制是否显示全文:

image-20190416142344967

image-20190416142512303

-------文章到此结束  感谢您的阅读-------