首頁 > web前端 > css教學 > 如何自動調整文字大小以適合 Div?

如何自動調整文字大小以適合 Div?

Susan Sarandon
發布: 2024-12-06 07:16:11
原創
517 人瀏覽過

How Can I Automatically Adjust Text Size to Fit Within a Div?

調整文字大小以適合Div

在您的情況下,您有一個帶有要在其中顯示文字的div 的背景圖像。但是,您希望文字的字體大小自動調整以適合 div。要實現此目的,請考慮以下解決方案:

jQuery實現:

http://jsfiddle.net/MYSVL/2/
登入後複製

HTML:

<div>
登入後複製

CSS:

#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?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板