JavaScript Scale Text для размещения в Fixed Div - PullRequest
Новая
       22

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

53 голосов
/ 12 ноября 2010

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

Спасибо.

Ответы [ 21 ]

69 голосов
/ 12 ноября 2010

Это что-то вроде взлома, но будет делать то, что вы хотите. 

<div id="hidden-resizer" style="visibility: hidden"></div>

Поместите это в нижней части вашей страницы, где не будут перемещаться другие элементы на странице.

Тогда сделайте это: 

var size;
var desired_width = 50;
var resizer = $("#hidden-resizer");

resizer.html("This is the text I want to resize.");

while(resizer.width() > desired_width) {
  size = parseInt(resizer.css("font-size"), 10);
  resizer.css("font-size", size - 1);
}

$("#target-location").css("font-size", size).html(resizer.html());
30 голосов
/ 12 ноября 2010

HTML: 

<div class="box" style="width:700px">This is a sentence</div>
<div class="box" style="width:600px">This is a sentence</div>
<div class="box" style="width:500px">This is a sentence</div>
<div class="box" style="width:400px">This is a sentence</div>

JavaScript: 

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

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

    $( box ).css( 'font-size', n );

    while ( $( line ).width() > width ) {
        $( box ).css( 'font-size', --n );
    }

    $( box ).text( $( line ).text() );

});

Демо: http://jsfiddle.net/e8B9j/2/show/

Удалите «/ show /» из URL для просмотра кода.

13 голосов
/ 16 мая 2012

Я написал плагин jQuery для этого:

http://michikono.github.com/boxfit

Плагин будет масштабировать текст по горизонтали и вертикали до максимально доступного размера внутри поля, а затем центрировать его.

Единственное, что вам нужно сделать, это определить div с текстом внутри него: 

<div id="scale">some text</div>

А затем позвоните: 

$('#scale').boxfit()

Метод примет несколько аргументов для отключения / включения переноса текста и выравнивания по центру.

7 голосов
/ 29 ноября 2013

Для новых браузеров вы можете использовать Inline-SVG.Это можно масштабировать как изображение с помощью CSS ..! 

.smallerVersion{
max-width: 50%
}
<!DOCTYPE html>
<html>
<head>
<title>Scale SVG example</title>
</head>

<body>





<h2>Default version:</h2>
<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <style>
    .small { font: italic 13px sans-serif; }
    .heavy { font: bold 30px sans-serif; }

    /* Note that the color of the text is set with the    *
     * fill property, the color property is for HTML only */
    .Rrrrr { font: italic 40px serif; fill: red; }
  </style>

  <text x="20" y="35" class="small">My</text>
  <text x="40" y="35" class="heavy">cat</text>
  <text x="55" y="55" class="small">is</text>
  <text x="65" y="55" class="Rrrrr">Grumpy!</text>
</svg>

<h2>Scaled version:</h2>
<svg class="smallerVersion" viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <style>
    .small { font: italic 13px sans-serif; }
    .heavy { font: bold 30px sans-serif; }

    /* Note that the color of the text is set with the    *
     * fill property, the color property is for HTML only */
    .Rrrrr { font: italic 40px serif; fill: red; }
  </style>

  <text x="20" y="35" class="small">My</text>
  <text x="40" y="35" class="heavy">cat</text>
  <text x="55" y="55" class="small">is</text>
  <text x="65" y="55" class="Rrrrr">Grumpy!</text>
</svg>




</body>

</html>

(width: 100%;)

5 голосов
/ 01 июля 2013

Большинство других ответов используют цикл для уменьшения размера шрифта до тех пор, пока он не уместится на элементе div, это ОЧЕНЬ медленно, поскольку страница должна повторно отображать элемент каждый раз, когда размер шрифта изменяется. В конце концов мне пришлось написать собственный алгоритм, чтобы он работал так, чтобы я мог периодически обновлять его содержимое, не останавливая работу браузера пользователя. Я добавил некоторые другие функции (вращение текста, добавление отступов) и упаковал его как плагин jQuery, вы можете получить его по адресу:

https://github.com/DanielHoffmann/jquery-bigtext

просто позвоните 

$("#text").bigText();

и он прекрасно поместится на вашем контейнере.

Смотрите это в действии здесь:

http://danielhoffmann.github.io/jquery-bigtext/

Пока у него есть некоторые ограничения, div должен иметь фиксированную высоту и ширину, и он не поддерживает перенос текста в несколько строк.

Edit2: теперь я исправил эти проблемы и ограничения и добавил больше опций. Вы можете установить максимальный размер шрифта, а также можете ограничить размер шрифта, используя ширину, высоту или оба (по умолчанию оба). Я постараюсь принять значения max-width и max-height в элементе оболочки.

3 голосов
/ 12 ноября 2010

Я не знаю точного пути, но вот приблизительное: 

var factor = 1/3;  // approximate width-to-height ratio
var div = $('#mydiv');
div.css('font-size', div.width() / (div.text().length * factor) + 'px');

Вам нужно будет настроить factor в зависимости от используемого вами шрифта. 1/3, кажется, работает хорошо для Times New Roman.

2 голосов
/ 01 марта 2012

Вот решение coffeescript, которое я придумал. Я клонирую элемент, для которого необходимо изменить размер шрифта, и удаляю его в конце расчета. Для повышения производительности у меня есть код, который выполняет вычисления только после того, как изменение размера остановлено на 200 мс.

Пометить элементы с помощью класса autofont , чтобы сделать это незаметно. 

# 
# Automagically resize fonts to fit the width of the 
# container they are in as much as possible. 
#
fixfonts = ->

  scaler = 1.2

  for element in $('.autofont')

    size =  1
    element = $(element)
    desired_width = $(element).width()

    resizer = $(element.clone())
    resizer.css
      'font-size': "#{size}em"
      'max-width': desired_width
      'display': 'inline'
      'width': 'auto'
    resizer.insertAfter(element)

    while resizer.width() < desired_width
      size = size * scaler
      resizer.css
        'font-size':  "#{size}em"

    $(element).css
        'font-size': "#{size / scaler }em"

    resizer.remove()

$(document).ready =>
  fixfonts()

  timeout = 0
  doresize = ->
    timeout--
    if timeout == 0
      fixfonts()

  $(window).resize ->
    timeout++
    window.setTimeout doresize, 200
2 голосов
/ 22 июля 2011
2 голосов
/ 12 ноября 2010

Внутри вашего div, есть текст в диапазоне, который не имеет отступов. Тогда ширина промежутка будет длиной текста.
Непроверенный код для поиска правильного размера шрифта для использования: 

var objSpan = $('.spanThatHoldsText');  
var intDivWidth = $('.divThatHasAFixedWidth').width();  
var intResultSize;  

for (var intFontSize = 1; intFontSize < 100; intFontSize++)  

  objSpan.css('font-size', intFontSize);  

  if (objSpan.width() > intDivWidth) {  
    intResultSize = intFontSize - 1;  
    break;  
  }  

}

objSpan.css('font-size', intResultSize);
2 голосов
/ 04 мая 2013

Модифицированная версия @sworoc с поддержкой целевого класса 

function resizeText(text, size, target) {

    var fontSize = 0;
    var resizer = $('<span>');

    resizer.html(text).hide();
    resizer.attr('class', target.attr('class'));
    $('body').append(resizer);

    while(resizer.width() < size) {
        fontSize++
        resizer.css("font-size", fontSize);
    }

    target.css('font-size', fontSize).html(text);
    resizer.remove();
}

Использование 

resizeText("@arunoda", 350, $('#username'));
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...