How to "float" absolute positioned span with inline-block text?

Question

If the text reaches the absolutely positioned span element, it should flow around it. If the text within the div element does not fill an entire line, the entire line should not be colored when hovering over it, but only the text, hence display: inline-block. So how can I achieve this?

.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>

@Paulie_D Yes, that is exactly the problem. But how can I get around it and achieve the desired effect? — Three Year Old
– Three Year Old, Commented May 24, 2024 at 15:40
@Paulie_D Thank you, but I need the text to be colored as a block. — Three Year Old
– Three Year Old, Commented May 24, 2024 at 16:17

Temani Afif · Accepted Answer · 2024-05-24 18:02:51Z

Use float combined with width: fit-content like below:

.wrapper {
  width: 500px;
  text-align: justify; /* to illustrate the wrapping */
}
ul {
  list-style: none;
}
ul > li {
  margin: 10px 0;
}

ul > li > span {
  float: right; /* use float */
  margin-left: 3px;
  font-size: 3em;
  line-height: 0.6;
  cursor: pointer;
}
ul > li > div {
  padding: 5px;
  font-size: 0.75em;
  width: fit-content; /* equivalent to your 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.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>

Collectives™ on Stack Overflow

How to "float" absolute positioned span with inline-block text?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related