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

wherewhyi

已于 2022-04-24 08:44:09 修改

阅读量7.6k

点赞数 16

文章标签： css

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

本文链接：https://blog.csdn.net/java_wzh123/article/details/124322590

版权

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

摘要由CSDN通过智能技术生成

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

1、应用场景

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

2、实现代码

html代码如下：

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

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

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