纯 CSS 实现文字换行环绕效果

⌛ 三年前。。。

🧔‍♂️ 一同事问我：“你说用 css 能不能直接实现这个效果，不想用 js 写，好麻烦啊”

我回答道：“应该不行吧，好像没什么好用的方法。。。”

✅ 现在，三年之约已到，我终于找到了纯 css 实现的方法

省流，实现代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        margin: 0;
        padding: 0;
      }
      .text-wrap {
        float: right;
        width: 15px;
        height: 15px;
        shape-outside: content-box;
        background-color: rebeccapurple;
        border: 2px solid black;
        border-radius: 2px;
        margin-top: 20px;
        padding-left: 5px;
        /* padding: 20px; */
      }
      .ellipsis {
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 显示的行数 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 20px;
      }

      .box {
        width: 400px;
      }
    </style>
  </head>
  <body>
    <div class="box ellipsis">
      <div class="text-wrap"></div>
      <p>
        这是要环绕的文本内容。这是要环绕的文本内容。这是要环绕的文本内容。这是要环绕的文本内容。这是要环绕的文本内容。这是要环绕的文本内容。这是要环绕的文本内容。
      </p>
    </div>
  </body>
</html>

起源

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

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

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

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

/* Keyword values */
initial-letter: normal;

/* Numeric values */
initial-letter: 1.5; /* Initial letter occupies 1.5 lines */
initial-letter: 3; /* Initial letter occupies 3 lines */
initial-letter: 3 2; /* Initial letter occupies 3 lines and
                           sinks 2 lines */

/* Global values */
initial-letter: inherit;
initial-letter: initial;
initial-letter: revert;
initial-letter: revert-layer;
initial-letter: unset;

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