如何用CSS实现父div内超宽子元素保持单行、超出部分自动隐藏？

问题原因 #

overflow: hidden 仅会对超出父容器边界的内容执行隐藏，但你的代码中并没有限制子元素不换行：行内元素（display: inline）默认遵循文本流排版规则，当父容器宽度不足时会自动换行，换行后子元素总宽度不会超过父容器宽度，自然不会触发横向溢出隐藏的效果。

实现方案 #

下面给出两种常用的实现方式，均可以实现子元素同行排列、超出父容器部分自动隐藏的效果：

方案1：基于行内元素的实现 #

给父元素新增 white-space: nowrap 属性，强制所有行内内容不换行，配合原有的 overflow: hidden 即可生效：

<div style="overflow:hidden; white-space: nowrap;">
  <a href="#" style="display:inline;"><img src="http://j-time.ru/wp-content/themes/bulteno-theme/images/no-banner-300x250.jpg" alt=""></a>
  <a href="#" style="display:inline;"><img src="http://j-time.ru/wp-content/themes/bulteno-theme/images/no-banner-300x250.jpg" alt=""></a>
</div>

注意：行内元素之间默认会因为HTML代码中的换行/空格产生间隙，如果你需要消除间隙，可以将父元素的 font-size 设为0，再单独给子元素设置需要的字体大小即可。

方案2：基于Flex布局的实现（更推荐，适配性更强） #

给父元素设置flex布局，强制不换行，同时给子元素设置flex-shrink: 0避免子元素被自动压缩：

<div style="display: flex; flex-wrap: nowrap; overflow: hidden;">
  <a href="#" style="flex-shrink: 0;"><img src="http://j-time.ru/wp-content/themes/bulteno-theme/images/no-banner-300x250.jpg" alt=""></a>
  <a href="#" style="flex-shrink: 0;"><img src="http://j-time.ru/wp-content/themes/bulteno-theme/images/no-banner-300x250.jpg" alt=""></a>
</div>

这个方案不需要处理行内元素的间隙问题，后续增删子元素也不需要额外调整样式。

内容的提问来源于stack exchange，提问作者Natalya GNS