纯css实现自动显示“全文”链接

站长

2022年09月08日 15:43 · 阅读数 34

最近发现了一位大佬用纯css实现了自动显示“全文”链接的这样一个功能，用的方法挺巧妙的，于是我自己也试着实现了一下，借此来记录一下～

功能效果

文案较少时直接显示，文案较多时限制5行，显示省略号，然后再显示个全文链接，点击跳转，大概长这样：纯css实现自动显示“全文”链接

实现思路

布局

布局的话没什么复杂的东西，很简单就可以实现：

<div class="wrap">
    <p class="text">一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案是不是真的很长很长好像还不够长继续再长一点。</p>
    <a class="link" href="#">全文</a>
</div>

溢出显示省略号

单行文本溢出这个大家都知道，这样写，关键是要设置个宽度：

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行文本溢出，这样写：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

这样写完之后的效果长这样：纯css实现自动显示“全文”链接目前来看已经实现了超出三行截取，但是全文链接还是一直都存在，接下来想办法用css来区分这两种情况。

方案一

在文本的末尾使用一个元素遮盖住下面的链接，可以用伪元素::after实现：

.text::after {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 50px; //能遮住链接就行
    background-color: red;
}

实现效果如下：纯css实现自动显示“全文”链接由于在设置绝对定位时，并没有设置 top 值，所以 ::after 仍然紧跟在文本的后面。因此在文本超出的情况下，::after已经位于可视范围外了，所以不会遮盖下面的链接，实际上是这个样子（借用一下大佬的图，如侵删）：纯css实现自动显示“全文”链接最后再把背景颜色改成和父元素一样就可以了

.text::after {
   background-color: inherit; 
}

大致能实现功能，但是会有一个问题，那就是文案少的时候链接仍然会占据位置，所以还应该让父元素在文案少的时候去掉链接的那一行高度。

方案二

负的margin能够减少容器的高度，这次就不能用绝对定位了，代码如下：

.text::after {
   content: '';
   display: block;
   margin-top: -24px;
}

文本多的时候已经出界了，所以不会受影响，文本少的时候就可以减少一行的高度，不过下面这个链接还是可见的，这时可以再复制一份文案覆盖在上面，要使用相同的样式，并且要用定位，最重要的是要记得加上背景颜色。

<div class="wrap">
        <p class="text">一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案是不是真的很长很长好像还不够长继续再长一点。</p>
        <p class="copy">一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案是不是真的很长很长好像还不够长继续再长一点。</p>
        <a class="link" href="#">全文</a>
    </div>
.text,.copy {
  //相同样式
}
.text::after {
   content: '';
   display: block;
   margin-top: -24px;
}
.copy {
  position: absolute;
  left: 15px;
  right: 15px;
  top: 15px;
}

当然如果不想多增加一个标签的话还可以使用伪元素：

<div class="wrap">
    <p class="text" title="一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案是不是真的很长很长好像还不够长继续再长一点。">一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案是不是真的很长很长好像还不够长继续再长一点。</p>
    <a class="link" href="#">全文</a>
</div>

.text::before {
    content: attr(title);
}

效果如下：纯css实现自动显示“全文”链接现在基本上就很完美了～

总结

兼容性

因为多行文本溢出使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端。

涉及知识点

充分利用 CSS 遮盖和溢出隐藏，很多特效都可以利用
绝对定位在不使用 left 或者 top 时，仍然处于默认文本流位置
负的 margin 可以改变容器的尺寸
resize属性是否可由用户调整元素的尺寸，需要跟overflow一起使用，值可以是 auto、hidden 或 scroll，否则不生效
伪元素默认是行内元素，想让它另起一行得display:block

最后奉上完整代码，拿走不谢～

<div class="wrap">
   <p class="text" title="一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案是不是真的很长很长好像还不够长继续再长一点。">一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案一段超级长的文案是不是真的很长很长好像还不够长继续再长一点。</p>
   <a class="link" href="#">全文</a>
</div>
.wrap{
    width: 650px;
    margin: 50px auto;
    padding: 15px;
    resize: horizontal;
    overflow: hidden;
    border: 1px solid #bebebe;
    border-radius: 8px;
    position: relative;
    background-color: #fff;
    line-height: 1.5;
}
.text,.text::before {
    overflow : hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    background-color: inherit;
}
.text::after {
    content: '';
    display: block;
    margin-top: -1.5em;
}
.text::before {
    content: attr(title);
    position: absolute;
    left: 15px;
    right: 15px;
    top: 15px;
}

原文出处：https://mp.weixin.qq.com/s/fM...