省流，实现代码

 1<!DOCTYPE html>
 2<html lang="en">
 3  <head>
 4    <meta charset="UTF-8" />
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6    <title>Document</title>
 7    <style>
 8      p {
 9        margin: 0;
10        padding: 0;
11      }
12      .text-wrap {
13        float: right;
14        width: 15px;
15        height: 15px;
16        shape-outside: content-box;
17        background-color: rebeccapurple;
18        border: 2px solid black;
19        border-radius: 2px;
20        margin-top: 20px;
21        padding-left: 5px;
22        
23      }
24      .ellipsis {
25        display: -webkit-box;
26        -webkit-line-clamp: 2; 
27        -webkit-box-orient: vertical;
28        overflow: hidden;
29        text-overflow: ellipsis;
30        line-height: 20px;
31      }
32
33      .box {
34        width: 400px;
35      }
36    </style>
37  </head>
38  <body>
39    <div class="box ellipsis">
40      <div class="text-wrap"></div>
41      <p>
42        这是要环绕的文本内容。这是要环绕的文本内容。这是要环绕的文本内容。这是要环绕的文本内容。这是要环绕的文本内容。这是要环绕的文本内容。这是要环绕的文本内容。
43      </p>
44    </div>
45  </body>
46</html>

起源

前几天在翻 chrome 的博客时偶然看到了这么一个东西 Initial-letter

Chrome 110 年初登陆，initial-letter属性是一个小而强大的 CSS 功能，它为首字母的位置设置样式。您可以将字母放置在下降或上升状态。该属性接受两个参数:

第一个参数用于将字母放入相应段落的深度，

第二个参数用于将字母从段落上方抬高多少。

 1
 2initial-letter: normal;
 3
 4
 5initial-letter: 1.5; 
 6initial-letter: 3; 
 7initial-letter: 3 2; 
 8                           sinks 2 lines */
 9
10
11initial-letter: inherit;
12initial-letter: initial;
13initial-letter: revert;
14initial-letter: revert-layer;
15initial-letter: unset;

您甚至可以将两者结合使用，如下面的演示所示。

于是，回想起了 3 年前的那个问题。能不能用这个属性 + :before + iconfont 来实现呢？

但是，这个属性只能使用于首字母，

于是翻了很多文档，问了下 AI 最终得到了shape-outside这个终极解决方案

要点

shape-outside

shape-outside 的 CSS 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。默认情况下，内联内容包围其边距框; shape-outside 提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。

值：content-box

定义一个由内容区域的外边缘封闭形成的形状（译者：表述的不太好，就是被 padding 包裹的区域，在 chrome 控制台中的盒子模型图中的蓝色区域。）。每一个角的弧度取 0 或 border-radius - border-width - padding 中的较大值。

其它的值：circle、ellipse、inset、polygon、url、auto 我们这次用不到。

但是使用 url 属性也应该是可以做到的，因为会识别到 alpha 通道。

兼容性

可以看到兼容性还不错

总结

shape-outside 是一个非常实用的属性，可以实现一些比较复杂的文本环绕效果。
shape-outside 的兼容性比较好，不是特殊情况应该完全适用。