css - 随着视口(viewport)宽度变小，是否可以让 div 不折叠？

Question

显然，我可以设置 width 属性，但 div 包含决定其宽度的 p 个元素。

我可以从计算值下的网络检查器中提取这个值，然后手动输入它，但我想要一个更优雅的解决方案。

#mi_control {
  display: inline-block;
  position: relative;
  width: auto;
}
.menu_bottom {
    float: left;
}

<div id='mi_control' class='radius_all'>
  <p id='mi_cover_l' class='menu_bottom small_dark'>Foo &copy;</p>
  <p id='mi_about_l' class='menu_bottom small_dark'>About</p>
  <p id='mi_privacy_l' class='menu_bottom small_dark'>Privacy</p>
  <p id='mi_team_l' class='menu_bottom small_dark'>Contact</p>
  <p id='mi_arc_l' class='menu_bottom small_dark'>Developers</p>
</div>

在这种情况下计算出的宽度为 341px，如 Chrome Inspector 所示。

Answer 1

要防止 div 中的文本在尺寸上进一步折叠和文本换行，请在 div 上使用 white-space: nowrap CSS 规则。

工作现场演示:

#mi_control{
  display: inline-block;
  position:  relative;
  width: auto;
  white-space: nowrap;
}

<div id='mi_control' class='radius_all'>
  <p id='mi_cover_l' class='menu_bottom small_dark'>Arcmarks &copy; </p>
  <p id='mi_about_l' class='menu_bottom small_dark'>About (more random text added here to increase div width more random text added here to increase div width more random text added here to increase div width)</p>
  <p id='mi_privacy_l' class='menu_bottom small_dark'>Privacy</p>
  <p id='mi_team_l' class='menu_bottom small_dark'>Contact</p>
  <p id='mi_arc_l' class='menu_bottom small_dark'>Developers</p>
</div>

JSFiddle 版本: https://jsfiddle.net/hcfbvcxk/1/