跨度泄漏其父元素

时间:2016-11-10 18:04:04

标签: css

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

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

如何解决?

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

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

2 个答案:

答案 0 :(得分:3)

您可能正在寻找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;
}

答案 1 :(得分:0)

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

就像:

.tag {
  display: inline-block;
}

希望这有帮助!