JavaScript Scale Text для размещения в Fixed Div

Question

В JavaScript / jQuery, как я могу масштабировать строку текста переменной длины внутри Div фиксированной ширины, чтобы одна строка всегда помещалась внутри Div (как одна строка)?

Спасибо.

Answer 1

Я не мог понять, как добавить это к сообщению sworoc, но я думал, что все равно поделюсь: решение Lonesomeday испортится, если вы используете какую-либо навигацию AJAX.Я немного изменил его:

if ($('#hidden-resizer').length == 0){ 
    $('<div />', {id: 'hidden-resizer'}).hide().appendTo(document.body); 
}

Answer 2

У меня была похожая проблема, которая заставила меня написать свой собственный плагин для этого. Одним из решений является использование подхода «сжатие к подгонке», как описано выше. Однако, если вам нужно разместить несколько элементов или вас интересует производительность, например, при изменении размера окна, взгляните на jquery-quickfit .

Он измеряет и рассчитывает размер неизменяемого размера для каждой буквы текста, который нужно уместить, и использует его для вычисления следующего наилучшего размера шрифта, который помещает текст в контейнер.

Расчеты кэшируются, что делает его очень быстрым (практически не наблюдается снижения производительности при 2-м изменении размера вперед) при работе с несколькими текстами или необходимости вписывать текст несколько раз, например, при изменении размера окна.

Пример изготовления, примерка текстов 14х16х2

Answer 3

Я сделал (еще) еще один плагин для решения этой проблемы:

https://github.com/jeremiahrose/perfectFit.js

Он генерирует SVG, поэтому он очень быстрый - просто запускается один раз при загрузке страницы. Способен автоматически переносить и масштабировать отдельные слова, чтобы точно соответствовать div.

Answer 4

Вот мое изменение к предложению @ teambob (в над комментариями ), которое учитывает также высоту контейнера:

<div class="box" style="width:700px; height:200px">This is a sentence</div>
<div class="box" style="width:600px; height:100px">This is a sentence</div>
<div class="box" style="width:500px; height:50px">This is a sentence</div>
<div class="box" style="width:400px; height:20px">This is a sentence</div>

И затем ..

$('.box').each(function(i, box) {

    var width = $(box).width(),
        height = $(box).height(),
        html = '<span style="white-space:nowrap">',
        line = $(box).wrapInner(html).children()[0],
        maxSizePX = 2000;

    $(box).css('font-size', maxSizePX);
    var widthFontSize = Math.floor(width/$(line).width()*maxSizePX),
        heightFontSize = Math.floor(height/$(line).height()*maxSizePX),
        maximalFontSize = Math.min(widthFontSize, heightFontSize, maxSizePX);

    $(box).css('font-size', maximalFontSize);
    $(box).text($(line).text());

});

См. Скрипка

Answer 5

Вы можете сделать несколько вещей, таких как

overflow:hidden

это обрезает лишнюю строку

overflow:auto // это показывает полосу прокрутки

см. Это

http://www.w3schools.com/Css/pr_pos_overflow.asp

попробуйте сделать это // проверить длину текста

if($('#idfortext').length>sometthing)
{
var fontsize=10;
}
$('#yourid').css('font-size',fontsize)

Answer 6

Это то, что я нашел сегодня:

1. Установить действительно большой поддельный размер шрифта (f) для целевого текста

2. измерьте ширину (w) высоты (h) контейнера текста и разделите на размер шрифта (f):

   • iw = w/f
   • ih = h/f

3. Разделите ширину основного контейнера (W) на iw и высоту основного контейнера (H) на ih:

   • kw = W/iw
   • kh = H/ih

4. Выберите самое низкое значение между kw и kh: это требуемый размер шрифта.

https://jsfiddle.net/pinkynrg/44ua56dv/

function maximizeFontSize($target) {

  var testingFont = 1000;
    $target.find(".text-wrapper").css("font-size", testingFont+"px");

  var textWidth = $(".text-wrapper").width()/1000;
  var textHeight = $(".text-wrapper").height()/1000;
  var width = $(".container").width();
  var height = $(".container").height();

  var kWidth = width/textWidth;
  var kHeight = height/textHeight;
  var fontSize = kWidth < kHeight ? kWidth : kHeight;

  // finally
  $(".text-wrapper")
    .css("font-size", fontSize+"px")
    .css("line-height", height+"px");
}

Answer 7

Существует отличный способ сделать это для однострочных текстов, таких как заголовки и т. Д., В чистом CSS:

h1{
    font-size: 4.5vw;
    margin: 0 0 0 0;
    line-height: 1em;
    height: 1em;
}

h1:after{
    content:"";
    display: inline-block;
    width: 100%;
}

Убедитесь, что размер шрифта остается достаточно маленьким, чтобы заголовок оставался на 1 строке.Использование «vw» (ширина области просмотра) вместо «px» позволяет очень легко сделать это и одновременно масштабировать.Ширина окна просмотра имеет тенденцию становиться неприятной, когда вы делаете окно браузера очень большим, многие сайты используют это, чтобы поддерживать определенную ширину сайта на действительно широких экранах:

body{
   max-width: 820px;
   margin: 0 auto;
}

Чтобы убедиться, что ваш шрифт нев зависимости от того, насколько велико окно просмотра, когда остальная часть вашего сайта перестает масштабироваться, используйте это:

@media(min-width:820px){
   h1{
      font-size: 30px; 
   }
}

Answer 8

Вот мое решение: я измеряю текст в новом div внутри предоставленного div, так что стили должны быть унаследованы. Затем я вставляю текст в div с помощью span, чтобы установить размер шрифта. Максимальный размер шрифта будет максимальным, но он будет уменьшен до размера.

Он не зацикливается: он рисует текст только один раз в одноразовом элементе div, а затем рисует непосредственно в предоставленном элементе div. Смотрите ответ @Hoffmann - мне просто не понравился целый «плагин» для ответа на вопрос.

требуется jquery.

var txt = txt || {}
txt.pad_factor = 1.1;
txt.insertText_shrinkToFit = function(div,text)
{
  var d = txt.cache || $('<div></div>');
  txt.cache = d;

  d.css('white-space','nowrap');
  d.css('position','absolute');
  d.css('top','-10000px');
  d.css('font-size','1000px');

  var p = $(div);
  var max_w = parseInt(p.css('max-width')) || p.width();
  var max_h = parseInt(p.css('font-size'));

  p.append(d);
  d.html(text);
  var w = d.width() * txt.pad_factor; 
  d.remove();

  var h = Math.floor(max_w*1000/w);
  var s = ( max_h < h ? max_h : h ) + "px";

  p.html('<SPAN style="font-size:' + s + '">' + text + '</SPAN>');
}

Например:

<html><head><script src=http://code.jquery.com/jquery-latest.min.js></script>
<script>/*insert code, from above, here.*/</script></head><body>

<div id=mysmalldiv style="max-width:300px;font-size:50px"></div>
<script>
  txt.insertText_shrinkToFit("#mysmalldiv","My super long text for this div.");
</script>

</body></html>

Для тестирования: так я обнаружил, что мне нужен 1.1 pad_factor; которые вы можете настроить для своих нужд.

<div id=mytestdiv style="max-width:300px;font-size:50px"></div>
<script>
  var t = "my text ";
  var i = 0;
  var f = function() {
    t += i + " ";
    txt.insertText_shrinkToFit("#mytestdiv",t);
    i++;
    if(i < 100) 
      setTimeout(f,1000);
  }
  f();
</script>

Примечание. Предполагается размер шрифта в пикселях. Я не проверял с их или pt.

Answer 9

плагин, чтобы соответствовать ширине и высоте контейнера

http://blissitec.github.io/scaletextjs/

Answer 10

Я отработал несколько постов здесь и сделал из него плагин jQuery.Я обнаружил, что начинать снизу и подниматься вверх не очень эффективно, поэтому я предполагаю, что текущий размер шрифта близок и работает оттуда.что он предполагает, что CSS для элемента является глобальным и применяется только к типу элемента.Другими словами, он создает тег с тем же именем и предполагает, что он будет иметь те же атрибуты CSS, что и элемент, который мы хотим изменить.Если это не так для вас, просто измените строку, в которой создается resizer.