乐趣区

关于css:纯css实现自动显示全文链接

jiezi

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

性能成果

文案较少时间接显示，文案较多时限度 5 行，显示省略号，而后再显示个全文链接，点击跳转，大略长这样：

实现思路

布局

布局的话没什么简单的货色，很简略就能够实现：

<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 来辨别这两种状况。

计划一

在文本的开端应用一个元素遮盖住上面的链接，能够用伪元素::after 实现：

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

实现成果如下：


因为在设置相对定位时，并没有设置 top 值，所以 ::after 依然紧跟在文本的前面。因而在文本超出的状况下，::after 曾经位于可视范畴外了，所以不会遮蔽上面的链接，实际上是这个样子（借用一下大佬的图，如侵删）：

最初再把背景色彩改成和父元素一样就能够了 

.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);
}

成果如下：

当初基本上就很完满了～

总结

兼容性

因为多行文本溢出应用了 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…

退出移动版