html - 如何使文本不与响应式 header (flexbox)中的外部容器重叠？

Question

我正在尝试制作一个响应式 header ，它在大多数屏幕分辨率(宽度:320-1920px)上看起来都不错，并且使用最少的媒体查询:

但是当我将宽度缩小到足够大时，文本开始与外部容器重叠:

首先想到的是在 li 元素上使用 overflow: hidden; 但它看起来并没有任何改善:

代码如下: http://jsfiddle.net/Hardcore/hxgbk6m0/1/

当 li 元素的边界开始接触文本时，我希望它停止收缩，这样文本就不会与 li 元素的边界重叠。文本长度可以改变，所以我不能只设置静态最小宽度。我还希望当水平边框到达文本时高度也停止缩小，因此菜单项始终为正方形。

我该怎么做？甚至可以只使用 CSS 而不使用 JavaScript 吗？我花了几个小时试图做到这一点，但似乎我不能自己做。请帮助我。

Answer 1

取消按钮或 Div 的宽度，并使用 padding-right 和 padding left。这将允许按钮或 div 随页面移动调整大小，并在文本的每一侧保持相同的空间。

.className{
padding-right:1%;
padding-left:1%;
}

除此之外，您必须使用@media 查询更改字体大小。