如何使用 CSS 動態調整文字大小以適合 Div 的寬度？

動態調整文字大小以適合Div 寬度

在div 寬度保持靜態而文字內容可變的情況下，對齊文字以對齊可能還不夠。要達到完美契合需要調整字母間距。

CSS 解決方案的技巧

要實現這一點，請結合使用 text-align:justify和巧妙的hack:

CSS:

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

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

HTML:

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

說明:

• 設定文字對齊方式以使用設定文字對齊方式以使用文字對齊 - align:justify.
• 在範圍內插入一個span元素div.
• 使用背景顏色（演示中可見）、100% 寬度、1em 高度和內聯塊顯示來設定跨度樣式。
• 透過將跨度寬度設為 100% 並使其成為透明，它充當容器，可以擴展以填充 div 中的剩餘空間。

以上是如何使用 CSS 動態調整文字大小以適合 Div 的寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！