字體大小自動調節，以適應在一個固定的形格

的HTML代碼是：

<div class="body"> 
    <div class="variation1 font700 green1"> 
    <h2> 
     sample <span class="divider"> arrowshape </span> 
    </h2> 
    </div> 
    <div class="clear"></div> 
    <div class="variation2 font700 green2"> 
    <h2> 
     as the text increases the font size must decrease but the block height must remain same <span class="divider"> as the text increases the font size must decrease but the block height must remain same </span> 
    </h2> 
    </div> 
    <div class="clear"></div> 

    <!-- OTHER HTML --> 

</div>

我要調整文本使其適合div而不更改所示箭頭塊的尺寸（大小）（文本大小可以更改，但不更改塊大小）。如變體2所示，箭頭塊必須看起來像樣本箭頭和Im面臨問題。有人可以幫我解決這個問題嗎？

來源

2013-08-22 user2613399

字體。 –

可能幫助：http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container –

至於CSS箭頭，他們很好，但我會做一些事情其他 - 比如添加一個額外的div/span而不是依賴於CSS – Richard

您必須使用javascript。 CSS本身不能處理這個。

對於一個貧窮的例子：

$(".font700").each(function(i, obj) { 
    newSize = $(obj).text().length; 
    newSize = 64 - newSize; 
    newSize = (newSize < 10) ? 10 : newSize; 
    $(obj).css("font-size", newSize + "px"); 
});

JSFiddle

將有比這更好的解決方案，通過的方式。這只是表明它可以使用JavaScript（特別是jQuery）。你可能會找到一些插件，如FitText，可以爲你解決很多這些問題。

_{（感謝嚴峻的鏈接）}

來源

2013-08-22 15:27:22 Richard

而不使用該插件並使用javascript如何在不改變箭頭塊的尺寸的情況下實現這一點（如你可以在你的小提琴中看到箭頭塊的大小減少）（假設塊的實際大小與示例文本中給出的一樣） – user2613399

@ user2613399使用CSS創建箭頭不是我要採用的方向。這些箭頭是頁面上可顯示的項目。我會製作div或跨度，以便您可以更好地控制它們。 – Richard

你可以給我一個這個概念的樣本小提琴嗎？ – user2613399

嘗試一個jQuery插件FITTEXT這將幫助你

來源

2013-08-22 15:27:37

這個插件能否讓我得到期望的結果，即不會減少箭頭塊的尺寸，包括尖角（三角形）部分，因爲文本適合它。對不起，因爲我從來沒有使用插件，這將是我第一次 – user2613399

雅，沒有嘗試它的代碼，但隨着div的增長和收縮它可以調整字體大小，以適應它。 –

對於那些誰不喜歡插件，像FitText，我只是發揮各地和計算字體大小通過查看當前的平均信寬度，以適應容納元件（併發症：多條線路，通過臨時改變的CSS寬度歡快這裏解決） HTML是

<div><h1><a><span>Title</span></a></h1></div>

和jQuery：

$("h1").each(function() { 
    var l = $(this).text().length; 
    var w = $(this).prop("offsetWidth"); //clientWidth doesn't always work 
    var old_pos = $(this).find("a").css("position"); 
    var old_w = $(this).find("a").css("width"); 
    $(this).find("a").css("position", "absolute"); 
    $(this).find("a").css("width", "1000px"); 
    var w2 = $(this).find("span").prop("offsetWidth"); 
    var h2 = $(this).find("span").prop("offsetHeight"); 
    var c = 1.2*(w2/h2)/l; // Current proportion of font width, 1.2 is constant 
    var fontsize = w/l/c; 
    fontsize = (fontsize<10)?10:fontsize;  //limit min 
    //$(this).append(" "+c+"/"+fontsize); //test 
    //Set font size to fill width of parent element 
    $(this).css("font-size",fontsize+"px"); 
    $(this).find("a").css("position", old_pos); 
    $(this).find("a").css("width", old_w); 
});

如果你樂於使用插件然後http://fittextjs.com/符合該法案這一重新調整我的砌築式格柵

來源

2014-11-07 22:30:12

字體大小自動調節，以適應在一個固定的形格

回答

相關問題