如何实现CSS中Div内文本环绕上标数字的排版效果？

需要在多层自带样式的Div嵌套的富文本免责声明前添加标注用的上标数字，想要实现文本环绕上标的理想效果：

1 sometext sometext sometext sometext ...
sometext sometext ...

目前只能得到两种不理想的效果：

• 效果一：文本缩进，无法自然环绕

1 sometext sometext ...
  ... sometext sometext

• 效果二：上标单独占行，文本换行显示

1
sometext sometext ...
... sometext sometext

解决方案 #

核心问题在于原结构中上标与富文本容器是同级块级元素，导致富文本无法环绕浮动的上标。可以通过两种方式解决：

方法一：调整上标位置至富文本内容内部

直接将<sup>标签放到富文本的段落内容最前方，利用行内元素的特性实现自然环绕，同时微调样式确保排版美观。

修改后的代码如下：

.container {
  box-sizing: border-box;
}

sup {
  background: yellow;
  padding: 2px 4px; /* 调整内边距，适配文字大小 */
  margin-right: 6px; /* 与正文保持合适间距 */
  line-height: 1; /* 避免上标拉高行高 */
}

.RichText {
  background: green;
  box-sizing: border-box;
}

.ProseMirror p {
  margin: 0; /* 移除段落默认边距，避免顶部空白 */
  line-height: 1.5; /* 保持正文行高可读性 */
}

<div class="container">
  <div class="RichText">
    <div class="RichTextStyled">
      <div contenteditable="false" translate="no" class="ProseMirror">
        <p><sup>1</sup>I am some rich text that stretches over multiple lines. I am some rich text that stretches over multiple lines. I am some rich text that stretches over multiple lines.</p>
      </div>
    </div>
  </div>
</div>

方法二：保留原结构，调整容器样式

如果无法修改HTML结构，可通过调整CSS让富文本容器允许内容环绕浮动的上标：

.container {
  box-sizing: border-box;
  overflow: auto; /* 清除浮动对父容器的影响 */
}

sup {
  background: yellow;
  padding: 6px; /* 补上单位，避免样式失效 */
  float: left;
  margin-right: 8px;
  line-height: 1;
}

.RichText {
  background: green;
  box-sizing: border-box;
  display: flow-root; /* 让容器内容环绕浮动元素 */
}

.ProseMirror p {
  margin: 0;
}

<div class="container">
  <sup>1</sup>
  <div class="RichText">
    <div class="RichTextStyled">
      <div contenteditable="false" translate="no" class="ProseMirror">
        <p>I am some rich text that stretches over multiple lines. I am some rich text that stretches over multiple lines. I am some rich text that stretches over multiple lines.</p>
      </div>
    </div>
  </div>
</div>

关键修改说明 #

• 补上padding的单位（原代码padding:6会导致样式失效）
• 移除sup的display: inline-block，避免破坏行内排版
• 清除段落默认的margin，确保上标与正文顶部对齐
• 使用display: flow-root或overflow: auto确保容器能正确包裹浮动元素，让文本自然环绕

内容的提问来源于stack exchange，提问作者Alien