html - 将 div 拟合到多行文本跨度

Question

我遇到了这个问题：

span {
  width: fit-content;
  background-color: yellow;
}

div {
  width: fit-content;
  border: black 1px solid;
  max-width: 100px;
}

<div>
  <span>Fooooo Barrrrrrrr</span>
</div>

<p>The right side border should be touching the right side of the longest line.</p>

我希望 div 尽可能接近跨度的大小。我已经放在width: fit-content;那里，但它似乎只适合它自己的max-width. 我不是要求让 div 适合每一行的边界，但它应该与span. 我该如何解决这个问题？

标签： htmlcss

Answer 1

试试这个：

.customblk span {
    background-color: yellow;
}
.customblk div {
    border: black 1px solid;
    max-width: max-content;
}

<section class="customblk">
<div>
  <span>Fooooo Barrrrrrrr </span>
</div>
<p>The right side border should be touching the right side of the longest line.</p>
</section>