Html 当我缩小浏览器宽度时，文本就会从页面上消失_Html_Css

Html 当我缩小浏览器宽度时，文本就会从页面上消失

html css

Html 当我缩小浏览器宽度时，文本就会从页面上消失,html,css,Html,Css,每当我缩小浏览器宽度时，文本就会消失。我希望文本保持可见，即使浏览器更小。关于如何做到这一点的任何提示。我尝试了所有主要的浏览器，结果都是一样的演示：我的CSS <style type="text/css"> html, body { height : 100%; min-height : 100%; } body { background : url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSz-vXYld

每当我缩小浏览器宽度时，文本就会消失。我希望文本保持可见，即使浏览器更小。关于如何做到这一点的任何提示。我尝试了所有主要的浏览器，结果都是一样的

演示：

我的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，正文{
身高：100%；
最小高度：100%；
} 
身体{
背景：url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSz-vXYldxqtANJ0BbLtSBtGQfhKHBZhtJYUDvsAFl0vbKs4USP）中心无重复固定#000000；
} 
#包装纸{
保证金：0自动；
宽度：50%；
}
#页脚{
位置：绝对位置；
底部：0；
左缘：12.5%；
宽度：50%；
背景色：#000000；
高度：30px；
}
主体{颜色：白色；}
正文{字体系列：'Noto Sans'，Verdana，Sans serif；
字体大小：12px；
}
h1{
字体系列：“共享技术”，Verdana，无衬线；
字体大小：400；
字体大小：12px；
}
#主要{
宽度：100px；
高度：100px；
背景色：透明；
位置：绝对位置；
排名：0；
底部：100；
左：500；
右：0；
保证金：自动；
}

我的HTML

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


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


此处文本
正文

不幸的是，这是正常的事情。如果你把浏览器设为10px×10px，一些文本将不得不消失

不过，有一些方法可以让它工作得更好

如果您开始的时间足够早，希望研究页面的“框架”，那么Twitter引导库可以更好地处理其中的一些内容。例如，这将允许缩小的浏览器更好地处理导航栏

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

我不太确定您在问什么。如果添加

换行：断开单词我不太理解#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
告诉我它是否提供了您想要的东西…
消失是什么意思？我在您的问题中添加了一个JSFIDLE演示。但是文本仍然可见。kasper感谢链接，是的，在JSFIDLE中它不会消失，我无法理解。putvande我的意思是，当我将页面缩小时，我的页面中没有栏，因此我看不到文本。使浏览器窗口“变小”吗？我们能知道有多小吗？是移动分辨率还是10px等？bcoz，我发现文本不会在小提琴中消失..Max谢谢，但在我使用这行时不会改变任何东西。谢谢，但我想避免引导，我会检查css3媒体内容。是的，Max成功了，我有滚动条，所以当我缩小浏览器时，我可以使用滚动条，谢谢你的更正和帮助。