首頁  >  文章  >  web前端  >  如何使用 CSS 動態調整文字大小以適合 Div 的寬度?

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

Susan Sarandon
Susan Sarandon原創
2024-11-23 15:22:21765瀏覽

How Can I Dynamically Resize Text to Fit a Div's Width Using CSS?

動態調整文字大小以適合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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn