1

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

4 回答 4

1

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

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

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

这些中的任何一个也是如此-

  • 不要让您的应用程序兼容无限缩放，它应该适用于给定的范围，最好的测试方法是使其兼容您机器上所有可用的分辨率。
  • 为了达到上述目的，请尝试以百分比形式给出宽度，以便在不同的分辨率下不会出现不合适的水平滚动
  • 如果宽度总是低于 500 像素，则给它一个静态宽度，因为大多数屏幕都可以容纳该宽度。
于 2013-03-14T05:06:19.567 回答
1

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

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

于 2013-03-14T05:08:29.780 回答
1

如果您不想断线，可以使用white-space属性设置为nowrap 

.about{

white-space:nowrap; 

}

所以你的文字不会中断

并设置你的最大宽度它也可能是一个问题

于 2013-03-14T05:09:23.287 回答
0

只在你的类中添加 width:515px 而不是 max-width 在这里你去

    <!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>
于 2013-03-14T04:55:10.253 回答