如何使文字水平拉伸以填充 Div 的寬度？

水平拉伸文字以適合 Div 寬度

在 Web 開發中，通常需要水平擴展文字以填充特定的 div寬度。但是，預設情況下，文字不會拉伸以佔據額外的空間。

解決方案：文字對齊和內聯元素

要實現此效果，我們可以利用CSS 文字-align:justify 以及一個小技巧：

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 中的文字並添加寬度跨越整個div 的空span元素，我們強製文字水平拉伸以填充可用空間。

此技術可確保文字始終完美填充 div，無論其長度如何，從而創建視覺效果吸引人的佈局。

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