Html 浏览器调整大小时文本从div溢出？_Html_Css_Google Chrome

Html 浏览器调整大小时文本从div溢出？

html css google-chrome

Html 浏览器调整大小时文本从div溢出？,html,css,google-chrome,Html,Css,Google Chrome,我有一个div，我想保存我的文本，但当我缩小窗口时，文本会破裂并溢出底部。这似乎只是chrome的一个问题，我希望有人能帮助我 .about{ float: left; margin-left: 50px; margin-bottom: 20px; max-height: 226px; max-width: 515px; font-size: 16px; font-family:"Trebuchet MS", Arial, Helvetic

我有一个div，我想保存我的文本，但当我缩小窗口时，文本会破裂并溢出底部。这似乎只是chrome的一个问题，我希望有人能帮助我

.about{
    float: left;
    margin-left: 50px;
    margin-bottom: 20px;
    max-height: 226px;
    max-width: 515px;
    font-size: 16px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

HTML:


欢迎:
我所有的文字都在这里，不断地溢出

仅在类中添加宽度：515px，而不是最大宽度给你

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>

    <body>
    <style type="text/css">
        .about{
    float: left;
    margin-left: 50px;
    margin-bottom: 20px;
    max-height: 226px;
    width:515px;
    //max-width: 515px;
    font-size: 16px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        }
    </style>
     <div class=about>
        <h3>Welcome:</h3>
        <p> All my Text goes here that keeps spilling out.</p>
        </div>
    </body>
    </html>


无标题文件
.关于{
浮动：左；
左边距：50像素；
边缘底部：20px；
最大高度：226px；
宽度：515px；
//最大宽度：515px；
字体大小：16px；
字体系列：“投石机MS”，Arial，Helvetica，无衬线；
}
欢迎:
我所有的文字都在这里，不断地溢出

这是一种预期的行为。当你放大时，你实际上是在增加像素的大小，也就是说，降低分辨率，所以所有的东西看起来都很大，也就是说，现在你的元素具有相同的像素宽度和高度，覆盖了更多的空间。当您将缩放级别提高到足够高时，您的内容（即文本）无法容纳在一行中，它将分解到下一行。所以这是根据预期

按照惯例，你应该给你的div一个宽度和文本一个字体大小，这样它就可以适应大范围的分辨率（低或高）

但是，如果希望文本保持水平，可以为其容器指定静态宽度，这样放大时会出现水平滚动，因为div是块元素

以下任何一项也是如此—

不要让你的应用程序兼容无限变焦，它应该适用于给定的范围，最好的测试方法是让它兼容你机器上所有可用的分辨率
为了实现上述目标，请尝试以百分比表示宽度，以便在适当的水平方向上，滚动条不会以不同的分辨率显示
如果宽度总是低于500px，那么给它一个静态宽度，因为这个宽度可以在大多数屏幕上调节

尝试使用ems调整所有内容的大小。我的意思是，从字体到边框、页边距等等，这将是一个很好的响应性设计

另外，尝试设置一个高度。对于初学者来说，如果坚持使用像素，可以从600像素开始，或者尝试200像素。

如果不想断线，可以使用

空白

属性设置为

nowrap

.about{

white-space:nowrap; 

}

所以你的文字不会中断

设置最大宽度也可能是个问题

您希望它做什么。你有一个最大高度。溢出滚动或溢出隐藏应该会改变这种情况，因为标记的属性（填充和边距）在我的电脑中，在chrome浏览器中，在欢迎下方和重新调整浏览器大小时，它在div中包装，这对我来说是正常的！！我认为您需要更具体地使用.about{text align:inline.}提供演示：，等等。请尝试

rem

。我更喜欢它而不是em

.about{

white-space:nowrap; 

}