1

テキストを保持したい div がありますが、ウィンドウをズームアウトすると、テキストが壊れて下にこぼれます。これはクロムの問題だけのようで、誰かが私を助けてくれることを望んでいました.

.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

これは予期される動作です。ズームインすると、実際にはピクセル サイズが大きくなります。つまり、解像度が低下するため、すべてが大きく表示されます。つまり、同じピクセル幅と高さの要素がより多くのスペースをカバーします。ズーム レベルを十分に高くすると、コンテンツ (テキストなど) が 1 行に収まらなくなり、次の行に分割されます。なので期待通り。

プラクティスに従って、div に幅を指定し、テキストにフォント サイズを指定して、幅広い解像度 (低または高) に対応できるようにする必要があります。

テキストを水平のままにしたい場合は、コンテナーに静的な幅を与えることができます。そうすれば、ズームインすると、div がブロック要素であるため、水平スクロールが表示されます。

これらのいずれかを行います-

  • アプリを無限ズームに対応させないでください。特定の範囲に対応する必要があります。それをテストする最善の方法は、マシンで利用可能なすべての解像度で互換性を持たせることです。
  • 上記を達成するために、不適切な水平スクロールが異なる解像度で表示されないように、パーセンテージで幅を指定してみてください
  • 幅が常に 500px 未満になる場合は、ほとんどの画面に対応できる静的な幅を指定します。
于 2013-03-14T05:06:19.567 に答える
1

emsですべてのサイズを変更してみてください。つまり、フォントから境界線、余白などに至るまで、すべてが優れたレスポンシブ デザインになります。

また、高さを設定してみてください。手始めに、ピクセルを維持したい場合は 600 ピクセルから始めるか、200 em を試してください。

于 2013-03-14T05:08:29.780 に答える
1

改行したくない場合は、white-spaceプロパティセットを使用できますnowrap 

.about{

white-space:nowrap; 

}

あなたのテキストが壊れないように

最大幅を設定すると、問題になる可能性もあります

于 2013-03-14T05:09:23.287 に答える
0

ここに行く max-width の代わりに、クラスに 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>
于 2013-03-14T04:55:10.253 に答える