Как автоматически изменить размер текста внутри div? - PullRequest
Новая
       2

Как автоматически изменить размер текста внутри div?

20 голосов
/ 24 мая 2011

У меня есть фоновое изображение с div.Я хочу написать текст, но этот текст должен изменить размер шрифта через div.

Ответы [ 9 ]

52 голосов
/ 24 мая 2011

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

Вот пример с реализацией jQuery: http://jsfiddle.net/MYSVL/2/

Вот div 

<div id="fitin">
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>

с фиксированнымразмер 

#fitin {
    width: 300px;
    height: 100px;
    border: 1px solid black;
    overflow: hidden;
    font-size: 1em;
}

Этот JavaScript сделает работу. 

$(function() {
    while( $('#fitin div').height() > $('#fitin').height() ) {
        $('#fitin div').css('font-size', (parseInt($('#fitin div').css('font-size')) - 1) + "px" );
    }
});
6 голосов
/ 22 августа 2013

FlowType.js сделает именно это: измените размер шрифта, чтобы он соответствовал ограничивающему элементу, будь то div или другой тип элемента.

Пример реализации FlowType:

  1. Настройте свой стиль 

    body {
font-size: 18px;
line-height: 26px;
}

  2. Загрузите FlowType с GitHub и включите ссылку на него в элементе вашей головы 

    flowtype.jQuery.js

  3. Call FlowType 

    $('body').flowtype();

  4. (необязательно) Обновить настройки по умолчанию 

    $('body').flowtype({
minimum   : 500,
maximum   : 1200,
minFont   : 12,
maxFont   : 40,
fontRatio : 30,
lineRatio : 1.45
});

Проверьте их домашнюю страницу для интерактивной демонстрации

1 голос
/ 28 февраля 2014

На вопрос уже давно дан ответ, но я бы хотел добавить несколько заметок.

С тех пор в юниверс добавлен дополнительный плагин jQuery: FlowType.js

https://github.com/simplefocus/FlowType.JS

Я попробовал свои силы в данных решениях и плагинах (включая FlowType.JS), в конце концов, я написал свой собственный.Я просто хотел бы включить это здесь как «вдохновение».Я использую другой подход: я вычисляю соотношение, что размер текста больше, чем его родитель.Я не знаю, имеет ли это смысл, но для меня это работает хорошо.

    /* shrinkText jQuery Plugin  */

(function( $ ){

  $.fn.shrinkText = function() {

    var $_me = this;
    var $_parent = $_me.parent();

    var int_my_width = $_me.width();
    var int_parent_width = $_parent.width();

    if ( int_my_width > int_parent_width ){

      rl_ratio =   int_parent_width / int_my_width;

      var int_my_fontSize = $_me.css("font-size").replace(/[^-\d\.]/g, '');

      int_my_fontSize = Math.floor(int_my_fontSize * rl_ratio);

      $_me.css("font-size", int_my_fontSize + "px");

    }
  };

})( jQuery );

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

HTML: 

<h1 style="white-space:nowrap;">
  <a href="#" >Macrobenthos of the North Sea - Miscellaneous worms</a>
</h1>

JavaScript: 

if( jQuery().shrinkText ){
    $("#title a").shrinkText();
}
1 голос
/ 24 мая 2011

Я не совсем уверен, что понимаю ваш вопрос, но я думаю, что вы спрашиваете, как разместить текст в определенном контейнере заданного размера.Я постараюсь ответить на этот вопрос.

Клиентская сторона

Когда вы захотите сделать это по требованию на клиенте, вам придется запустить Javascript.Идея состоит в том, чтобы:

  1. сгенерировать невидимое div и установить его стиль: 

    position: absolute;
top: 0;
left: 0;
width: auto;
height: auto;
display: block;
visibility: hidden;
font-family: /* as per your original DIV */
font-size: /* as per your original DIV */
white-space: /* as per your original DIV */

  2. скопировать в него свой текст

  3. проверьте, превысила ли ширина DIV размер вашего исходного DIV.

  4. отрегулируйте font-size значение, не просто увеличивая / уменьшая, а вычисляяРазница в ширине между вашим невидимым и оригинальным DIV.Это намного быстрее приведет к правильному размеру.

  5. перейдите к шагу 3 .

На стороне сервера

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

0 голосов
/ 03 мая 2016

Посмотрите этот пример здесь http://codepen.io/LukeXF/pen/yOQWNb, Вы можете использовать простую функцию при загрузке страницы и изменении размера страницы, чтобы волшебство произошло. 

function resize() {  
    $('.resize').each(function(i, obj) {
        $(this).css('font-size', '8em');

        while ($(this).width() > $(this).parent().width()) {
            $(this).css('font-size', (parseInt($(this).css('font-size')) - 1) + "px");
        }
    });
}
0 голосов
/ 27 декабря 2015

Я сделал лучшую версию кода @DanielB, возможно, это сэкономит кому-то время:)

(Просто добавьте класс RESIZABLE в div, который вы хотите изменить) 

$(document).ready(function() {
    $(window).resize(function() {

        $('.RESIZABLE').each(function(i, obj) {
            $(this).css('font-size', '8em');

            while ($(this).width() > $(this).parent().width()) {
                $(this).css('font-size', (parseInt($(this).css('font-size')) - 1) + "px");
            }
        });






    });
});
0 голосов
/ 17 декабря 2015

Я расширяю решение DanielB в случае, если у вас есть сложный HTML внутри div, и вы хотите сохранить соотношение между различными элементами: 

$(function() {
    $(window).on('resize', function() {
        $('#fitin').css('font-size', '1em');
        var count = 0;
        while( count< 30 && $('#fitin').height() > $('#fitin div').height() ) { 
            $('#fitin *').each(function( index ) {
                $(this).css('font-size',(parseInt($(this).css('font-size')) + 1) + "px");
            });
            count++;
        } 
        count = 0;
        while( count< 30 && $('#fitin div').height() > $('#fitin').height()-20 ) {
            $('#fitin *').each(function( index ) {
                $(this).css('font-size',(parseInt($(this).css('font-size')) - 1) + "px");
            })
            count++;
        }
    });
    $(window).trigger('resize');  
});
0 голосов
/ 17 декабря 2012

Вот глобальная функция с аннотациями JQuery и HTML5 Data для определения размера блока:

Не спрашивайте меня, зачем мне таблица :-), функция ширины лучше всего работает с таблицами ... в Jquery 1.7. Не получая ширину для Div

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

<table>
 <tr>
    <td class="caa" data-text-max-width="500" data-text-max-height="80">
       The Text is Here
    </td>
 </tr>
</table>

Функция для добавления: 

$(function () {
    var textConsts = {
        MIN_SIZE_OF_A_TEXT: 9
    };

    $('*[data-text-max-width]').each(function () {

        var textMaxWidth = $(this).data("text-max-width");
        var textMaxHeight = $(this).data("text-max-height");
        var minSizeOfaText = $(this).data("text-min-size");

        $(this).css('font-size', '9em');

        if (minSizeOfaText == null || !($(this).hasData("text-min-size")))
            minSizeOfaText = textConsts.MIN_SIZE_OF_A_TEXT;

        if (textMaxWidth == null || !($(this).hasData("text-max-width")))
            textMaxWidth = $(this).parent().width();

        if (textMaxHeight == null || !($(this).hasData("text-max-height")))
            textMaxHeight = $(this).parent().height();

        var curentWidth = $(this).width();
        var curentFontSize = 0;
        var numberOfRounds = 0;
        var currentHeigth = $(this).height();
        curentFontSize = parseInt($(this).css('font-size'));
        var lineHeigth = parseInt($(this).css('line-height'));
        if (currentHeigth > (curentFontSize * lineHeigth)) {
            curentWidth += curentFontSize * lineHeigth;
        }

        while (curentWidth > textMaxWidth || currentHeigth > textMaxHeight) {

            curentFontSize = parseInt($(this).css('font-size'));
            curentFontSize -= 1;

            $(this).css('font-size', curentFontSize + "px");

            curentWidth = $(this).width();
            currentHeigth = $(this).height();

            if (currentHeigth > (curentFontSize * 1.5))
                curentWidth += curentFontSize * 1.5;

            numberOfRounds += 1;

            if (numberOfRounds > 1000)
                break;

            if (curentFontSize <= minSizeOfaText)
                break;
        }

        $(this).css('height', textMaxHeight + "px");
        $(this).css('width', textMaxWidth + "px");
    });

});
0 голосов
/ 24 мая 2011

Вы должны предварительно загрузить изображение, чтобы получить ширину и высоту изображения.

Как только вы получите размеры, вы можете "попробовать" различные размеры шрифтов: 

$("<img/>").appendTo(document.body).attr('src','myBackground.png').load(function(){
    var width = $(this).width(), height = $(this).height(),
        $div = $("#myDivId"),
        font = 30;

    do{
      font--;
      $div.css('font-size',font);
    }while($div.width()>width || $div.height()>height || font == 0);

    $div.width(width);
    $div.height(height);
});
...