如何使用 JavaScript 調整字體大小以適合單行 Div？

使用JavaScript 調整字體大小以適合單行上的Div

情況：

您有一篇文章的標題位於

中。標籤，但您希望確保標題保持在一行上，無論其長度如何。

CSS 解決方案：

沒有 CSS 屬性可讓您根據 div 寬度自動調整文字大小。

JavaScript/jQuery解決方案：

1. 創建一個隱藏的div，樣式如下：

   position: absolute;
   visibility: hidden;
   white-space: nowrap;
   font-family: [same as the title's]

2. 將標題文字複製到隱藏的div中。
3. 為隱藏的 div 設定初始字體大小。
4. 實作一個遞增的 while 迴圈隱藏 div 的字體大小，直到其寬度與父 div 的寬度相符。
5. 將計算出的字體大小設定為原始標題。

最佳化：

為了提高效能，可以最佳化while循環以減少iterations:

1. 設定起始字體大小。
2. 取得測試 div 的寬度。
3. 計算原始 div 和測試 div 之間的寬度因數。
4. 根據這個因素調整字體大小，而不是遞增/遞減一單位。
5. 測試測試 div 的寬度。

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