如何使文字方塊跨越其容器的 100% 而不會溢出？

控制 100% 寬度的文字方塊擴展

通常希望文字方塊跨越其容器的整個寬度。為了實現這一目標，人們可以應用以下樣式：

<code class="css">input.wide {
  display: block;
  width: 100%;
}</code>

但是，這種方法面臨一個挑戰：文字框的寬度是由其內容定義的。文字方塊上的預設邊距、邊框和填充會導致其超出容器的邊界，從而產生難看的間隙。

要解決此問題，我們需要一種方法讓文字方塊填充其寬度容器不超過它。一個解決方案是利用 CSS3 屬性 box-sizing: border-box。此屬性重新定義了寬度的含義，以包括外部填充和邊框。

不幸的是，對框大小調整的支持尚未普遍。因此，我們可以包含特定於瀏覽器的後備值：

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

作為使用box-sizing 的替代方法，可以手動將padding-right 應用於封閉元素，確保它等於預期的padding和邊框。

這兩種方法都允許控製文字方塊的寬度，同時防止文字溢出到容器的範圍之外。

以上是如何使文字方塊跨越其容器的 100% 而不會溢出？的詳細內容。更多資訊請關注PHP中文網其他相關文章！