最近有共事问我这样一个交互，当文本较多时（超出5行），呈现“全文”链接，阐明有更多的内容，点了之后跳转新页面，效果图如下
那么，有没有方法在不应用 js 的状况下实现呢？我一看就来了兴致，看着如同和之前这篇文章 CSS 实现多行文本“开展收起” (juejin.cn) 有点相似？不过这次的布局要简略的多，交互推敲了半天发现也是能够完满实现的，并且是齐全不一样的思路，一起来看看吧
一、布局
对于布局这块就没什么好钻研的了，失常写就行，也不须要什么浮动，实现如下
<div class="wrap"> <p class="text">CSS的 margin-bottom 属性用于设置元素的底部外边距，容许设置负数值。一个正数值将让它绝对于失常流与邻近块更远，而负数值将使得更近。</p> <a class="link">全文</a></div>而后加点款式，-webkit-line-clamp 实现多行截断
.wrap { background: #fff; border-radius: 8px; padding: 15px; box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;}.text{ overflow: hidden; text-overflow: ellipsis; text-align: justify; display: -webkit-box; -webkit-line-clamp: 3; /*多行超出省略*/ -webkit-box-orient: vertical; line-height: 1.5;}能够失去这样的成果
很显然，上面的链接也是始终存在的。那么，CSS 如何辨别这两种状况呢？
二、不完满实现
起初，我很快想到了一种实现形式，如下
在文本的开端应用一个元素遮蔽住上面的链接，这里能够用伪元素::after实现。
.text::after{ content: ''; position: absolute; display: block; width: 100%; height: 50px; /*只有能盖住链接就行*/ background: red;}成果如下
留神下面的实现，因为在设置相对定位时，并没有设置 top 值，所以 ::after 依然紧跟在文本的前面。因而在文本超出的状况下，::after曾经位于可视范畴外了，所以不会遮蔽上面的链接，实际上是这个样子
最初把遮蔽的色彩换成雷同的底色就能够了
.text::after{ background: inherit; /*继承父级的背景*/}残缺代码可拜访 auto expand cover (codepen.io)
那为什么说这是不完满的呢？
仔细的小伙伴可能曾经发现了，就是当不显示链接的时候，上面依然占据着空间。当我把这个实现给到共事时，果然是这样
三、完满的实现
尽管性能上没什么问题，但视觉上必定难以承受。认真比拟两种状况的差别，不难发现，两种状况的高度是不一样的（当文本较少时，默认少一行链接的高度），所以能够想想，怎么缩小容器的高度呢？这里我想到了负的 margin，实现如下
首先，必定不能再用相对定位了
.text::after{ content: ''; /*position: absolute;*/ display: block; height: 50px; /*轻易给一个高度，也能够为0*/ background: red;}这里轻易给一个高度都行，也能够为0，为了色彩不便所以给了 50px，还加了背景色
这样，在文本较少时的成果如下（文本较多的时候曾经出界了，不受影响）
接着，给::after设置负的 margin-top，假如链接的高度是 20，那么就须要往上挪动本身高度加上 20，也就是
.text::after{ /*其余款式*/ margin-top: -70px; /*50 + 20*/}能够发现，当初整个容器高度曾经减去了链接的高度，演示如下
不过当初下方的链接依然是可见的。这时，能够复制一份文本笼罩就能够了，并且设置雷同的款式，而后应用相对定位笼罩（记得加上背景)
<div class="wrap"> <p class="text">CSS的 margin-bottom 属性用于设置元素的底部外边距，容许设置负数值。一个正数值将让它绝对于失常流与邻近块更远，而负数值将使得更近。</p> <p class="copy">CSS的 margin-bottom 属性用于设置元素的底部外边距，容许设置负数值。一个正数值将让它绝对于失常流与邻近块更远，而负数值将使得更近。</p><!--新加一层标签--> <a class="link">全文</a></div>.text .copy{ /*雷同的款式*/}.copy{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;}原理示意如下
这样就完满实现了，尽管多了一层标签，不过也能够用伪元素生成
<div class="wrap"> <p class="text" title="CSS的 margin-bottom 属性用于设置元素的底部外边距，容许设置负数值。一个正数值将让它绝对于失常流与邻近块更远，而负数值将使得更近。">CSS的 margin-bottom 属性用于设置元素的底部外边距，容许设置负数值。一个正数值将让它绝对于失常流与邻近块更远，而负数值将使得更近。</p> <a class="link">全文</a></div>.text::before{ content: attr(title); /*其余款式*/}残缺代码能够查看 auto expand margin (codepen.io)
四、总结和阐明
即便只是一个小小的交互， 不过也蕴含了很多 CSS 小技巧，兼容性无需放心，除了 line-clamp ，其余属性都是全兼容的，总结以下几点
- 充分利用 CSS 遮蔽和溢出暗藏，很多特效都能够利用
- 相对定位在不应用 left 或者 top 时，依然处于默认文本流地位
- 负的 margin 能够扭转容器的尺寸
或者未来会呈现一个文本超出伪类，比方:trunk，这样很多相干交互都能够轻易实现了。不过在此之前，还是能够利用各种障眼法模仿实现，尽管有些不够简洁，但正是 CSS 独特的乐趣不是吗？最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤