如何让内联块文本环绕绝对定位的span元素？

要同时达成这两个效果，需要调整元素的定位逻辑和容器的显示属性，具体修改方案如下：

核心思路 #

1. 文本环绕效果：绝对定位元素会脱离文档流，文本无法自然绕开它；改用float:right让元素留在文档流内，文本会自动环绕右侧的浮动元素。
2. Hover仅文本背景变色：将文本容器设置为display: inline-block，让容器宽度收缩至文本实际占据的范围（而非块级元素默认的整行宽度），这样hover时背景色只会覆盖文本区域。

修改后的完整代码 #

CSS #

.wrapper {
  width: 500px;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul > li {
  position: relative;
  margin-bottom: 15px;
  overflow: hidden; /* 包含浮动元素，避免li高度塌陷 */
}
ul > li > span {
  float: right; /* 替换绝对定位，实现文本环绕 */
  font-size: 3em;
  line-height: 0.75;
  cursor: pointer;
  margin-left: 10px; /* 文本与叉号间留间距，提升可读性 */
}
ul > li > .text-container {
  display: inline-block; /* 容器收缩至文本宽度 */
  padding: 10px;
  font-size: 0.75em;
}
/* Hover背景色设置 */
ul > li:nth-child(1) > .text-container:hover {
  background: red;
}
ul > li:nth-child(2) > .text-container:hover {
  background: yellow;
}
ul > li:nth-child(3) > .text-container:hover {
  background: green;
}

HTML #

<div class="wrapper">
  <ul>
    <li>
      <span>×</span>
      <div class="text-container">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
    </li>
    <li>
      <span>×</span>
      <div class="text-container">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
    </li>
    <li>
      <span>×</span>
      <div class="text-container">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    </li>
  </ul>
</div>

关键细节说明 #

• 给li加overflow: hidden：确保浮动的叉号被包含在li内部，防止li因为子元素浮动而高度塌陷。
• 给span加margin-left：避免文本紧贴叉号，优化视觉体验。
• 文本容器用inline-block：既保留了块级元素的padding属性，又让容器宽度跟随文本内容自适应，完美实现hover时仅文本区域变色的需求。

内容的提问来源于stack exchange，提问作者Three Year Old