如何動態調整字體大小以適合 Div 內的文字？

div 中的動態字體大小

要無縫調整div 中的文字內容以適應其尺寸，請考慮以下解決方案：

jQuery實作：

這段JavaScript使用jQuery 實作的程式碼會迭代調整字體大小，直到文字適合div：

$(function() {
    while( $('#fitin div').height() > $('#fitin').height() ) {
        $('#fitin div').css('font-size', (parseInt($('#fitin div').css('font-size')) - 1) + "px" );
    }
});

HTML 結構：

使用ID 定義一個div " fitin」並在其中嵌套另一個包含文字的div：

<div>

CSS樣式：

要限制 div 大小並隱藏溢出的內容，請新增以下CSS：

#fitin {
    width: 300px;
    height: 100px;
    border: 1px solid black;
    overflow: hidden;
    font-size: 1em;
}

用法範例：

初始化$(function() {...}) 區塊中的JavaScript 程式碼用於在頁面開啟時自動調整字體大小

此解決方案可確保文字內容能夠優雅地適合div，無論其尺寸如何，從而為動態內容提供靈活且用戶友好的體驗。

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