Question

Span标签在其直接父级和所有其他包装父级之外泄漏。 Take a look at this fiddle

我已尝试display，overflow和其他属性，但我无法弄清楚这一点。它只是一直在泄漏。

如何解决？

.tag {
  padding: 2px 5px 3px 5px;
  margin-right: 5px;
  border: 1px solid red;
  white-space: nowrap; /* prevent splitting spans */
}

.tag-wrapper {
  border: 1px solid blue;
  max-width: 300px;
}

.parent {
  border: 1px solid green;
}

<div class="parent">
  <div class="tag-wrapper">
    <span class="tag">tag 1</span>
    <span class="tag">tag 2</span>
    <span class="tag">tag 3</span>
    <span class="tag">tag 4</span>
    <span class="tag">tag 5</span>
    <span class="tag">tag 6</span>
    <span class="tag">tag 7</span>
  </div>
</div>

我试图找到答案，但似乎我不知道该怎么说这个问题。我熟悉崩溃边缘，这似乎是一个不同的问题。

Answer 1

您可能正在寻找display: inline-block;。

<span>元素本质上是内联元素，因此它们的有效高度实际上是基于它们的内容，而不是它们的边界框。通过使其表现为block元素，您应该达到预期的效果。

Here是您的小提琴的更新版本，这里是更新的tag CSS：

.tag {
  padding: 2px 5px 3px 5px;
  margin-right: 5px;
  border: 1px solid red;
  white-space: nowrap; /* prevent splitting spans */
  display: inline-block;
}

Answer 2

您应该在display: inline-block中使用.tag。查看更新的 Fiddle

就像：

.tag {
  display: inline-block;
}

希望这有帮助！

跨度泄漏其父元素

2 个答案: