如何使用 CSS 使文字完美填充容器的寬度？

拉伸文字以適合容器寬度

增強受限 div 內的文字美觀性是一個常見的挑戰。當文字內容發生變化時，需要保持精美且平衡的視覺外觀。本文探討如何結合使用 CSS 和巧妙的技術來實現這種無縫整合。

解決方案：文本對齊對齊和巧妙的技巧

CSS 屬性text-align:justify 在 div 內均勻分佈文本，使其沿左右邊距對齊。但是，標準對齊方式會保留指定的字母間距。為了真正貼合，一個小技巧添加了一個寬度為 100% 的透明跨度。

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 使文字完美填充容器的寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！