如何使用内联块文本“浮动”绝对定位范围？

Question

如果文本到达绝对定位的

span

元素，它应该围绕它流动。如果

div

元素中的文本未填充整行，则将鼠标悬停在其上方时不应为整行着色，而仅对文本着色，因此为

display: inline-block

。那么我怎样才能实现这个目标呢？

.wrapper {
  position: relative;
  width: 500px;
}
ul {
  list-style: none;
}
ul > li > span {
  position: absolute;
  right: 0;
  font-size: 3em;
  line-height: 0.75;
  cursor: pointer;
}
ul > li > div {
  padding: 10px;
  font-size: 0.75em;
}
ul > li > div:hover {
  display: inline-block;
}
ul > li:nth-child(1) > div:hover {
  background: red;
}
ul > li:nth-child(2) > div:hover {
  background: yellow;
}
ul > li:nth-child(3) > div:hover {
  background: green;
}

<div class="wrapper">
  <ul>
    <li>
      <span>×</span>
      <div>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>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>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    </li>
  </ul>
</div>

Answer 1

将

float

与

width: fit-content

结合使用，如下所示：

.wrapper {
  width: 500px;
  text-align: justify; /* to illustrate the wrapping */
}
ul {
  list-style: none;
}
ul > li > span {
  float: right; /* use float */
  font-size: 3em;
  line-height: 0.75;
  cursor: pointer;
}
ul > li > div {
  padding: 10px;
  font-size: 0.75em;
  width: fit-content; /* equivalent to your inline-block */
}
ul > li > div:hover {
}
ul > li:nth-child(1) > div:hover {
  background: red;
}
ul > li:nth-child(2) > div:hover {
  background: yellow;
}
ul > li:nth-child(3) > div:hover {
  background: green;
}

<div class="wrapper">
  <ul>
    <li>
      <span>×</span>
      <div>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.partu rient m ontes, nasce tur ri diculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
    </li>
    <li>
      <span>×</span>
      <div>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>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
    </li>
  </ul>
</div>