Question

我有一个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：

<div class=about>
    <h3>Welcome:</h3>
    <p> All my Text goes here that keeps spilling out.</p>
</div>

Answer 1

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

根据惯例，你应该给你的div宽度和文字字体大小，它可以适应各种分辨率（低或高）。

虽然如果你希望文本保持水平，你可以给它的容器一个静态宽度，这样当你放大时，会出现一个水平滚动，因为div是一个块元素。

这些中的任何一个 -

不要让您的应用兼容无限缩放，它应该适用于给定的范围，最好的方法是测试它是否与您机器上可用的所有分辨率兼容。
为了达到上述目的，请尝试以百分比形式给出宽度，以便不适当的水平滚动不会出现在不同的分辨率
如果宽度总是低于500px，则给它一个静态宽度，因为宽度可以容纳在大多数屏幕上。

Answer 2

尝试使用ems调整一切。我的意思是，从你的字体到边框，边距等等，这将是一个很好的响应式设计。

另外，尝试设置高度。对于初学者，如果你坚持使用像素，或者尝试200 ems，则从600 px开始。

Answer 3

如果您不想破坏自己的行，可以使用white-space属性设置为nowrap

.about{

white-space:nowrap; 

}

所以你的文字没有破解

并设置你的最大宽度它也可以是一个problam

Answer 4

仅使用您的类而不是max-width添加宽度：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>

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

4 个答案: