css - 隐藏的溢出无法按预期在内联元素上工作

Question

我试图隐藏比父级宽度宽的元素。这是代码笔 URL:https://codepen.io/anon/pen/zMEbrY .如您所见， children 换行时我希望他们保持在同一行。

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

.b, .c {
  display: inline;
}

.b {

}

.c {

}

Answer 1

使用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>