填充文字

我試圖調整文字的大小，因此它可以填補一定的空間填充文字

的空間。例如：因此，可以說，我的HTML是這樣的：

<h1 style="width:120px;">some text</h1>

我想單詞「一些文本」自動填充120px，知道「某些文本」可能是任何東西！我不關心字體寬度是否被拉伸，或者是否有一些空格已被添加到單詞中以使其適合120px的寬度。

我知道，在CSS，我們有overflow:hidden;和overflow:scroll;但是這兩個不知道他是誰

overflow:hidden;會隱藏120像素 overflow:scroll;之外的任何額外的字符將使我不想滾動！

任何解決方案？也許是一個JQuery插件或什麼的？我到處尋找，但我找不到任何東西。

來源

2012-11-25 shnisaka

嘗試'寬度：100％'文本元素 – 2012-11-25 20:54:26

上你想讓你的文本擴展到其他行，或者你希望它始終在一行嗎？ –

總是在一條線上 – shnisaka

您可以使用這樣的腳本適應字體的可用空間您的文字：

var fontSize = 100; 
var reduce = function() { 
    $('#txt').css('font-size', fontSize); 
    $('#mes').html(fontSize); 
    if ($('#txt').width()>MAX_MIDTH) { 
     fontSize -= 1; 
     reduce(); 
    } 
}; 
reduce(); 
$('#width, #height').change(function(){fontSize = 100;reduce()});

Demonstration

來源

2012-11-25 20:56:01

Woaaaah你做到了嗎？ –

是的，對於[有點類似的問題]（http://stackoverflow.com/questions/13416673/javascript-convert-width-and-height-to-font-size）（我試圖看看這一個可以說是重複的）。 –

太酷了......在原始答案上+1。 –

對齊使用text-align: justify

來源

2012-11-25 20:54:46

如果我有一個長名稱需要超過120像素，該怎麼辦 – shnisaka

爲什麼不檢查？它將被分解成多行文本。 –

我只想測試在一條線上 – shnisaka

回答

相關問題