React 多行省略的展开与收起
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了React 多行省略的展开与收起，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7517字，纯文字阅读大概需要11分钟。
内容图文
当字数多到一定程度就显示省略号点点点。最初只是简单的点点点，之后花样越来越多，点点点加下箭头，点点点加更多，点点点加更多加箭头…。多行省略就是大段文字后面的花式点点点。
而我实现的是这样的:
实现代码:
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">
省略号容器的样式要注意的一点是,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">), 它的高度就只文本的全高度:
然后是设置"…[展开]“和”[收起]"的div:
先把.ellipsis-ghost右移到.ellipsis-container的一半位置, 然后.ellipsis-ghost::before的高度要与.ellipsis-ghost的高度保持一致, 而.ellipsis-ghost的高度是与它的父级元素(.ellipsis-container)的高度保持一致的, 又因.ellipsis-container的高度是被.ellipsis-content的文本撑开的高度, 因此, .ellipsis-ghost::before的高度其实是与文本的高度保持一致的
接着把.ellipsis-placeholder的高度设置为最小文本的呈现高度(.ellipsis的max-height), 如果文本高度大于max-height, 由于右浮动的原理, 且.ellipsis-ghost:before的高度大于.ellipsis-placeholder的高度, 则可以把"…[展开]"显示出来, 如上显示;
如果文本高度小于或等于max-height, 则 .ellipsis-ghost:before的高度小于或等于.ellipsis-placeholder的高度, 那么"…[展开]"则会飘走而不显示, 如下:
最后可以在.toggle-button里设置一个点击事件来控制是否显示全文:
文章就分享到这，欢迎关注“前端大神之路”
内容总结
以上是互联网集市为您收集整理的React 多行省略的展开与收起全部内容，希望文章能够帮你解决React 多行省略的展开与收起所遇到的程序开发问题。
如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
来源：【匿名】