隐藏的内联项目上的溢出隐藏不起作用

Question

我正在尝试隐藏宽度大于父级宽度的项目。这是一个代码笔URL：https://codepen.io/anon/pen/zMEbrY。如您所见，孩子们在换行时休息，而我希望他们保持在同一行。

.a {
  width: 21px;
  overflow: hidden;
}

.b, .c {
  display: inline;
}

.b {

}

.c {

}

Answer 1

您可以将white-space: nowrap;添加到父容器

https://codepen.io/anon/pen/rQGRdO

Answer 2

使用white-space：

.a {
  width: 21px;
  overflow: hidden;
  white-space: nowrap;
}

.b, .c {
  display: inline;
}

<div class="a">
  <div class="b">500</div>
  <div class="c">501</div>
</div>

Answer 3

使用white-space:nowrap可以将所有溢出元素排除在其管辖范围之外

.a {
  width: 21px;
  overflow: hidden;
  white-space: nowrap;
}

.b, .c {
  display: inline;
}

.b {
  
}

.c {
  
}

<div class="a">
  <div class="b">500</div>
  <div class="c">501</div>
</div>