FlowType.js會做到這一點：調整字體大小以匹配邊界元素，無論是div還是其他元素類型。

實現FlowType的示例：

設置你的風格

body {

font-size: 18px;

line-height: 26px;

}

從GitHub下載FlowType，并在您的head元素中包含對它的引用

flowtype.jQuery.js

通話流程類型

$('body').flowtype();

（可選）更新默認設置

$('body').flowtype({

minimum   : 500,

maximum   : 1200,

minFont   : 12,

maxFont   : 40,

fontRatio : 30,

lineRatio : 1.45

});

查看他們的主頁以獲取交互式演示

我不能完全確定我是否理解您的問題，但我認為您要問的是如何將文本放入預定義大小的特定容器中。我將嘗試回答這個問題。

客戶端

當您想按需在客戶端上執行此操作時，您將必須運行Javascript。這個想法是：

生成不可見div并將其樣式設置為：

position: absolute;

top: 0;

left: 0;

width: auto;

height: auto;

display: block;

visibility: hidden;

font-family: /* as per your original DIV */

font-size: /* as per your original DIV */

white-space: /* as per your original DIV */

復制您的文字

檢查DIV的寬度是否超過原始DIV的大小。

調整font-size值的方法不只是增加/減少，而是通過計算不可見和原始DIV之間的寬度差。這將更快地糾正尺寸。

轉到步驟3。

服務器端

沒有在服務器上設置字體大小的可靠方法，因此它不適合您的客戶端呈現的容器。不幸的是，您只能根據預先測試的經驗數據估算尺寸。