Question

这是HTML：

.outer {
  width: 380px;
  margin: auto;
  text-align: center;
} 
.inner {
  position: relative;
  display: inline-block;
  width: fit-content;
}
.message {
  font-size: 24px;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

<div class="outer">
  <div class="inner">
    <span class="message">
      Your Lifelong Resource for Information
    </span>
    <div class="overlay">
    </div>
  </div>
</div>

这是一个小提琴：

https://jsfiddle.net/et2ra7Ls/3/

问题：

经检查，message的宽度为265像素，inner的宽度为380像素（与outer匹配）。有没有办法使inner的宽度与其内容相匹配，即265px，以便overlay会完全覆盖message？

努力：

我已经阅读了所有可以找到的帖子，并花了数小时尝试解决方案。许多帖子都是相似的，但似乎都无法解决这个问题。我在display: inline-block的CSS中有width: fit-content和inner，以表明即使建议将它们作为解决方案，它们也无法正常工作。这必须是简单或不可能的。是哪一个？

注意：

overlay除了显示的内容之外，还有很多其他功能，但我忽略了CSS，因为它很简单，我认为这与问题无关。
仅当message换行时，才会出现此问题。否则，inner的宽度与message相同。
这是一个简化的示例。我无法将inner或message设置为固定宽度。
inner必须保留某种块元素，因为如果它不是块，则其position: relative将不起作用。
outer的宽度因@media查询而异。

如何使div不超过所包含的跨度

0 个答案: