关于css:CSS-自动显示全文链接

最近有共事问我这样一个交互，当文本较多时（超出 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，其余属性都是全兼容的，总结以下几点

1. 充分利用 CSS 遮蔽和溢出暗藏，很多特效都能够利用
2. 相对定位在不应用 left 或者 top 时，依然处于默认文本流地位
3. 负的 margin 能够扭转容器的尺寸

或者未来会呈现一个文本超出伪类，比方:trunk，这样很多相干交互都能够轻易实现了。不过在此之前，还是能够利用各种障眼法模仿实现，尽管有些不够简洁，但正是 CSS 独特的乐趣不是吗？最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤