Question

每当我使浏览器宽度变小时，文本就会消失。我希望文本保持可见，即使浏览器较小。有关如何实现此目的的任何提示。我尝试过所有主流浏览器并且是一样的。

我的CSS

<style type="text/css">
html, body {
height : 100%;
min-height : 100%;
} 
 body {
background : url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSz-vXYldxqtANJ0BbLtSBtGQfhKHBZhtJYUDvsAFl0vbKs4USP) center center no-repeat fixed #000000;
} 
   #wrapper {
    margin: 0 auto;
    width:50%;
}
#footer {
     position: absolute;
     bottom: 0;
     margin-left: 12.5%;
     width: 50%;
     background-color:#000000;
     height:30px;
}
body {color:white;}
body { font-family: 'Noto Sans', Verdana, sans-serif; 
       font-size: 12px; 
     }
h1 { 
  font-family: 'Share Tech', Verdana, sans-serif; 
  font-weight: 400; 
  font-size: 12px;
}
#main{
     width: 100px;
     height: 100px;
    background-color: transparent;

    position: absolute;
    top:0;
    bottom: 100;
    left: 500;
    right: 0;

    margin: auto;
}
   </style>

我的HTML

<body style="overflow:hidden; margin:0"> 
    <div id="wrapper">   
    <div id="footer"><h1>Text here</h1>    </div>
</div> 


<div id="main">Text</div>

Answer 1

不幸的是，这是正常的事情。如果你的浏览器是10像素×10像素，那么一些文本将不得不消失。

虽然有很多方法可以让它更好用。

Twitter引导程序库可以更好地处理其中的一些内容，如果您足够早，您想要调查页面的“框架”。这将允许缩小浏览器以更好地处理导航栏。

CSS3的媒体是您在浏览器设置为较小尺寸时设置特定CSS规则的兴趣所在。这将允许您控制浏览器缩小时发生的情况。

Answer 2

我不确定你在问什么。如果您在css中添加word-wrap: break-word;，则文本将转到下一行，因此可见。

Answer 3

我真的不明白#wrapper元素的用法。

尝试删除它。然后将#footer的css设置为：

position: absolute;
bottom: 0;
width:100%;
background-color:#000000;
height:30px;

然后，您需要添加：

width:100%;
white-space:nowrap;
text-align:center;
padding:0;

到#h1 css。

告诉我它是否能满足您的需求......

当我使浏览器宽度变小时，文本会被推离页面，最终消失

3 个答案: