如何使文本在响应标题(flexbox)中不与外部容器重叠?
问题描述:
我试图做一个负责任的报头看起来好于大多数屏幕分辨率(宽度:320-1920px)与媒体查询的最低使用: 如何使文本在响应标题(flexbox)中不与外部容器重叠?
首先想到的是对li
元素使用overflow: hidden;
但它不看任何好转:
下面的代码: http://jsfiddle.net/Hardcore/hxgbk6m0/1/
当边框li
元素开始接触文字时,我希望它不再缩小,所以文字不会重叠li
元素的边框。文字长度可以改变,所以我不能只设置静态最小宽度。当水平边框达到文字时,我也想让高度停止缩小,所以菜单项总是正方形。
我该怎么做?这甚至可以使用CSS而不使用JavaScript?我花了几个小时试图做到这一点,似乎我不能自己做。请帮帮我。
答
取消按钮或Div的宽度,然后使用填充右侧和填充左侧。这将允许按钮或div随着页面的移动而变大,并且将在文本的每一侧保持相同的空间。
.className{
padding-right:1%;
padding-left:1%;
}
除此之外,您将不得不通过@media查询更改字体大小。