文本在瀏覽器調整大小時溢出div？
[英]Text Spills out of div on browser resize?
問題描述
我有一個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 個解決方案
解決方案1
1 2013-03-14 05:06:19
這是一種預期的行為。 放大時，實際上是增加像素大小，即降低分辨率，因此一切看起來都很大，即現在具有相同像素寬度和高度的元素覆蓋更多空間。 當您將縮放級別提高到足夠高時，您的內容（即文本）無法容納在一行中，它會分解為下一行。 這符合預期。
根據慣例，你應該給你的div寬度和文本字體大小，它可以適應各種分辨率（低或高）。
雖然如果你希望文本保持水平，你可以給它的容器一個靜態寬度，這樣當你放大時，會出現一個水平滾動，因為div是一個塊元素。
這些中的任何一個 -
- 不要讓你的應用程序兼容無限縮放，它應該是給定的范圍，最好的方法來測試它是否使你的機器上的所有可用分辨率兼容。
- 為了達到上述目的，請嘗試以百分比形式給出寬度，以便不適當的水平滾動不會出現在不同的分辨率上
- 如果寬度總是低於500px，則給它一個靜態寬度，因為寬度可以容納在大多數屏幕上。
解決方案2
1 2013-03-14 05:08:29
嘗試用ems調整一切。 我的意思是，從你的字體到邊框，邊距等等，這將是一個很好的響應設計。
另外，嘗試設置高度。 對於初學者，如果你堅持使用像素，或者嘗試200 ems，則從600 px開始。
解決方案3
1 2013-03-14 05:09:23
如果你不想破壞你的線，你可以使用設置為nowrap white-space屬性
.about{
white-space:nowrap;
}
所以你的文字不會破裂
並設置你的最大寬度它也可以是一個problam
解決方案4
0 2013-03-14 04:55:10
只需添加寬度：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區域
[英]Window resizing causes text to overflow bootstrap button boundaries or button spills out of div area
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.