当字数多到一定程度就显示省略号点点点。最初只是简单的点点点,之后花样越来越多,点点点加下箭头,点点点加更多,点点点加更多加箭头…。多行省略就是大段文字后面的花式点点点。
而我实现的是这样的:
![006tNc79gy1g249clv9nmj30fi07ywfu](https://www.vigor666.com/images/css-layout-ellipsis.assets/006tNc79gy1g249clv9nmj30fi07ywfu.jpg)
![006tNc79gy1g249d349i2j30fe0cudid](https://www.vigor666.com/images/css-layout-ellipsis.assets/006tNc79gy1g249d349i2j30fe0cudid.jpg)
实现代码:
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); 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%; 100%; height: 100%; color: #000; }
.ellipsis-ghost:before { content: ""; display: block; float: right; 50%; height: 100%; }
.ellipsis-placeholder { content: ""; display: block; float: right; 50%; height: 108px; /* h*n */ }
.toggle-button { float: right; font-size: 12px; /* f */ 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;
|
原理详解:
文字溢出截断
![文字溢出截断](https://www.vigor666.com/images/css-layout-ellipsis.assets/006tNc79gy1g24ag3e7omg308x03h7bt.gif)
文字溢出截断
1 2 3 4 5 6
|
<!DOCTYPE html><html><body> <style>@-webkit-keyframes width-change {0%,100%{ 320px} 50%{260px}}
|
-webkit-line-clamp
是webkit内核的私有css属性,用于进行多行省略,在安卓和ios上全支持。但它固定使用省略号,无法直接扩展。而且自带了溢出截断逻辑,作用于容器高度。仔细考察可发现它使用的省略号是单字符…
,可以用文字css属性如font-size
,letter-spacing
,color
等控制。
![文字溢出截断2](https://www.vigor666.com/images/css-layout-ellipsis.assets/006tNc79gy1g24aka3zw2g308x03hn4n.gif)
文字溢出截断2
1 2 3 4 5 6
|
<!DOCTYPE html><html><body> <style>@-webkit-keyframes width-change {0%,100%{ 320px} 50%{260px}}
|
设置外容器的font-size
、letter-spacing
、color
,并在子容器里恢复就可以单独设置省略号。这里外容器设置font-size
的值等于2倍行高(余下要撑开的宽度可用letter-spacing
补足,也可仅用font-size
撑开全部的宽度),color:transparent
可以让line-clamp既挤出文字又不截断容器高度,外容器高度达到7行而不是默认表现的6行,从而达到需要的溢出截断效果
实现详解:
首先写个省略号的容器<div className="ellipsis-container">
![image-20190416110711099](https://www.vigor666.com/images/css-layout-ellipsis.assets/006tNc79gy1g24aqpxke3j30f808eq49.jpg)
省略号容器的样式要注意的一点是,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;
|
接下来是正文的div(<div className="ellipsis-content">
), 它的高度就只文本的全高度:
![image-20190416111720814](https://www.vigor666.com/images/css-layout-ellipsis.assets/006tNc79gy1g24b1akvrjj30f60bkabg.jpg)
然后是设置"…[展开]“和”[收起]"的div:
![image-20190416112009101](https://www.vigor666.com/images/css-layout-ellipsis.assets/006tNc79gy1g24b47gwzlj30n00aigng.jpg)
![image-20190416112039123](https://www.vigor666.com/images/css-layout-ellipsis.assets/006tNc79gy1g24b4q4poxj30mi0aaabt.jpg)
先把.ellipsis-ghost
右移到.ellipsis-container
的一半位置, 然后.ellipsis-ghost::before的高度要与.ellipsis-ghost的高度保持一致, 而.ellipsis-ghost的高度是与它的父级元素(.ellipsis-container)的高度保持一致的, 又因.ellipsis-container的高度是被.ellipsis-content的文本撑开的高度, 因此, .ellipsis-ghost::before的高度其实是与文本的高度保持一致的
![image-20190416112111232](https://www.vigor666.com/images/css-layout-ellipsis.assets/006tNc79gy1g24b5aakupj30gm08qtac.jpg)
![image-20190416112154542](https://www.vigor666.com/images/css-layout-ellipsis.assets/006tNc79gy1g24b61f3vzj30im072ta7.jpg)
接着把.ellipsis-placeholder
的高度设置为最小文本的呈现高度(.ellipsis
的max-height
), 如果文本高度大于max-height
, 由于右浮动的原理, 且.ellipsis-ghost:before
的高度大于.ellipsis-placeholder
的高度, 则可以把"…[展开]"显示出来, 如上显示;
如果文本高度小于或等于max-height
, 则 .ellipsis-ghost:before
的高度小于或等于.ellipsis-placeholder
的高度, 那么"…[展开]"则会飘走而不显示, 如下:
![image-20190416115537471](https://www.vigor666.com/images/css-layout-ellipsis.assets/006tNc79gy1g24c549spcj30kg08ggmx.jpg)
![image-20190416115552162](https://www.vigor666.com/images/css-layout-ellipsis.assets/006tNc79gy1g24c5dkndfj30rs07i0u3.jpg)
![image-20190416115610657](https://www.vigor666.com/images/css-layout-ellipsis.assets/006tNc79gy1g24c5p9bfbj30ta06qdh4.jpg)
最后可以在.toggle-button
里设置一个点击事件来控制是否显示全文:
![image-20190416142344967](https://www.vigor666.com/images/css-layout-ellipsis.assets/006tNc79gy1g24c5p9bfbj30ta06qdh4.jpg)
![image-20190416142512303](https://www.vigor666.com/images/css-layout-ellipsis.assets/006tNc79gy1g24ggrde8vj30f00c8dic.jpg)