如何使用 CSS 拉伸文字以填充 Div 的寬度？

拉伸文字以佔據Div 寬度

在您的div 保持一致的寬度但可以包含可變數量的文字的情況下，挑戰出現了：如何分配字母間距以最佳地填充div？

幸運的是，這個透過 CSS 屬性的策略組合和巧妙的技巧，這項壯舉是可能實現的。

解決方案：

1. 應用text-align:justify;到div： 這確保文字在分配空間的左側和文字右側均勻對齊。
2. 合併一個 span 元素： 在 div 旁實作一個 span 標籤，並使用內聯塊顯示將其寬度設為 100%，高度設為 1em。這將充當文字底部的“間隔符號”。

範例程式碼：

div {
  background-color: gold;
  text-align: justify;
}

span {
  background-color: red;
  width: 100%;
  height: 1em;
  display: inline-block;
}

<div>
  Lorem ipsum sit dolor
  <span></span>
</div>

此策略強製文字擴充 div 的寬度，同時保留字母間距，創造視覺平衡的效果。

以上是如何使用 CSS 拉伸文字以填充 Div 的寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！