CSS实现小图标跟随文本(多行文本省略时显示在省略号后面)

原创已于 2022-04-24 08:44:09 修改 · 8.4k 阅读

35 ·

CC 4.0 BY-SA版权

文章标签：

#css

于 2022-04-21 15:30:09 首次发布

本文介绍了如何使用CSS实现小图标在多行文本省略时始终显示在省略号后面，详细解释了实现思路和具体代码，包括设置伪元素和浮动元素来确保图标位置正确。

CSS实现小图标跟随文本(多行文本省略时显示在省略号后面)

1、应用场景

在一个多行省略的文本中，要求文本后显示一个小图标，且触发了多行文本省略后，小图标依然显示在省略号后面。如下图：

2、实现代码

html代码如下：

<div class="container">
  <div class="content-wrapper">
    <div class="content">

       <!--小图标1(文本超出隐藏后显示)-->
       <span class="icon-1"></span>

       <!--文本内容-->
       <span>测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</span>
      
       <!--小图标2(跟随文本，超出后隐藏)-->
       <span class="icon-2"><span>
           
    </div>
  </div>
</div>

css代码如下：

.container{
  max-width: 300px;
}
/** 必须设置flex布局撑开容器，
**  否则content的before元素高度calc(100% - 18px)不会生效
*/
.content-wrapper{
  display: flex;
  position: relative;
  overflow: hidden;
}

.content{
    font-size: 14px;
    line-height: 20px;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/*撑开高度，确保icon-1位于文本右下方*/
.content::before{
    content: '';
    display: block;
    float: right;
    width: 0px;
    height: calc(100% - 18px);
}

/*用于文本未超出时遮挡icon-1*/
.content::after{
  position: absolute;
  content: '';
  display: inline-block;
  width: 100%;
  height: 100%;
  background: #ffffff;
}

/*文本超出后显示的图标*/
.icon-1{
  height: 16px;
  width: 16px;
  background-size: cover;
  margin-left: 8px;
  float: right;
  clear: both;
  display: block;
  background-image: url('../images/icon.png');
}

/*文本未超出时显示的图标*/
.icon-2{
  position: relative;
  display: inline-block;
  height: 16px;
  width: 16px;
  background-size: cover;
  margin-left: 2px;
  transform: translateY(2px);
  background-image: url('../images/icon.png');
}

/*文本未超出，且文本恰巧在某行末尾结束，遮挡处于正下方的icon-1*/
.icon-2::after{
  content: '';
  position: absolute;
  background: #ffffff;
  left: 0px;
  bottom: -40px;
  height: 40px;
  width: 40px;
}

3、实现思路

在文本节点后方放置一个小图标节点icon-2(行内元素)，这样就实现了小图标跟随文本。
完成上一步骤之后发现，当文本触发了超出隐藏时，小图标icon-2也被隐藏了，为解决这个问题，需要在放置一个小图标节点icon-1，且这个icon-1仅在触发了多行文本超出隐藏后才显示。
在content上添加一个右浮动before伪元素，高度为calc(100% - 容纳图标高度)，再将icon-1右浮动，这样就实现了icon-1必定出现在文本右下方且文本超出隐藏时位置在省略号后面。
接下来需要在文本未超出时将icon-1隐藏，只显示icon-2，为此需要在content上添加after伪元素，用于遮挡icon-1。这里的实现原理参考：https://zhuanlan.zhihu.com/p/373359523，这里面讲解的非常直观。
完成以上步骤基本已经实现功能了，但是却还有点小问题，当文本没有超出时，且恰巧在行末尾结束，content的after伪元素将无法遮住icon-1，如下图，所以还需要在icon-2正下方添加一个after伪元素遮挡。至此，功能就全部实现了。

4、总结

该功能起初以为很简单，但是实现时却遇到了许多坑，上面的实现方法是用纯css实现的，最关键的实现思路借用了https://zhuanlan.zhihu.com/p/373359523这篇文章。
最开始想到的是用js实现：
通过比较容器的scrollHeight和当前的offsetHeight（或者getBoundingClientRect().height）判断第二个图标的显示隐藏，但是这种方法用到了节点计算，当应用场景是需要循环渲染多节点时就比较难应用了。

CodePen的Demo地址：https://codepen.io/wang1355187/pen/ExorOPY