如何自動調整文字大小以適應受約束的 Div？

微調受約束Div 內的文字大小：自動解決方案

想像一下有一個帶有div 的背景圖像並希望疊加自動調整字體大小以適合受限div 的文字。這個問題尋求解決這個常見問題，在這裡我們提供全面的答案。

jQuery 實作：逐步指南

實現所需的效果因此，我們提出了一個基於jQuery 的解決方案，如以下互動式範例所示：http ://jsfiddle.net/MYSVL/2/。

我們先建立一個包含文字內容的div 容器：

<div>

接下來，我們對div 容器施加固定大小：

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

要動態調整文字大小，我們使用以下JavaScript程式碼：

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

此程式碼迭代地減少內部div的字體大小，直到文字適合容器 div 的指定高度，從而確保最佳效果有限空間內的可讀性和內容顯示。

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