如何防止寬文本框超出其容器？

防止寬文字方塊過度擴展容器

當嘗試建立跨越容器整個寬度的文字方塊時，會出現一個常見問題：文字方塊的實際寬度文字方塊可能會超出容器的邊界。這是因為瀏覽器預設分配邊距、邊框和填充，這有效地增加了文字方塊的整體寬度。

考慮以下範例：

<code class="html"><div id="outer">
  <div id="inner">
    <input type="text" class="wide">
    <input type="text" class="normal">
    <div style="clear:both;"></div>
  </div>
</div></code>

<code class="css">#outer {
  border: 1px solid #000;
  width: 320px;
  margin: 0px;
  padding: 0px;
}
#inner {
  margin: 20px;
  padding: 20px;
  background: #999;
  border: 1px solid #000;
}
input.wide {
  display: block;
  margin: 0px;
  width: 100%;
}
input.normal {
  display: block;
  float: right;
}</code>

在這種情況下， 「寬」類文字方塊延伸到容器之外，而「普通」類文字方塊則與容器的邊緣精確對齊。為了防止過度擴展，CSS3中引入的“box-sizing”屬性提供了解決方案。

<code class="css">input.wide {
  display: block;
  margin: 0px;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}</code>

透過將“box-sizing”設為“border-box”，文字方塊的寬度被定義為包括外部填充和邊框。這可確保文字方塊佔據其容器的整個寬度，而不會超出其邊界。

不幸的是，由於「box-sizing」是 CSS3 屬性，瀏覽器相容性可能會有所不同。隨著規範過程的進行，瀏覽器為其採用了不同的臨時名稱：Mozilla 的「moz-box-sizing」和基於 WebKit 的瀏覽器的「webkit-box-sizing」。

舊版瀏覽器的替代方法瀏覽器涉及將「padding-right」套用至父元素（例如「div」或「td」）。這可以幫助容納輸入元素中預設填充和邊框佔用的額外空間。然而，所需的「padding-right」量可能會根據所使用的瀏覽器而有所不同。

以上是如何防止寬文本框超出其容器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！