автоматическая настройка размера шрифта, чтобы поместиться в фиксированной форме DIV

Вот скрипка им работать:автоматическая настройка размера шрифта, чтобы поместиться в фиксированной форме DIV

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 без изменения размеров (размера) указанного стрелочного блока (размер текста может меняться, но не размер блока). Блок стрелок должен выглядеть как стрелка образца, а Im - проблема, как показано в варианте 2. Может кто-то, пожалуйста, помогите мне с этим?

источник

2013-08-22 user2613399

Если вы счастливы использовать плагин, то http://fittextjs.com/ приспосабливает счет. –

Может помочь: http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container –

Что касается стрелок CSS, они хороши, но я бы сделал somethign else - как добавление дополнительного 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, которые могут решить многие из этих проблем для вас.

_{(спасибо Grim за ссылку)}

источник

2013-08-22 15:27:22 Richard

без использования этого плагина и с помощью javascript, как это возможно, без изменения размеров блока стрелок (так как вы можете видеть в ур скрипке размер блока стрелок уменьшено) (Предположим, что фактический размер блока соответствует заданному тексту) – user2613399

@ user2613399 Использование CSS для создания стрелок - это не то направление, которое я бы выбрал. Эти стрелки являются отображаемыми элементами на странице. Я бы сделал divs или spans так, чтобы у вас был больше контроля над ними. – Richard

может у вас, пожалуйста, дайте мне образец скрипки для этой концепции? – user2613399

попробовать JQuery плагин FITTEXT это поможет вам

источник

2013-08-22 15:27:37

этот плагин даст мне желаемый результат, не уменьшая размеры стрелочного блока, включая заостренную (треугольную) часть, как текст в нем. Im извините за это, потому что я никогда не использовал плагины, и это будет мой первый раз – user2613399

ya, не пробовал это на вашем коде, но по мере того, как 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); 
});

Это изменяет свои шрифты в виде сетки кладочные стиле

источник

2014-11-07 22:30:12

автоматическая настройка размера шрифта, чтобы поместиться в фиксированной форме DIV

ответ

Смежные вопросы