Подтвердить что ты не робот

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

Я понимаю ваш вопрос таким образом, вы хотели бы подгонять какой-то текст в заданный div с фиксированным измерением, и если 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" );
    }
});

Ответ 2

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

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

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

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

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

    flowtype.jQuery.js

  • Call FlowType

    $('body').flowtype();

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

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

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

Ответ 3

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

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

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

  • создать невидимый 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 */

  • скопируйте свой текст в него

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

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

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

Серверная сторона

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

Ответ 4

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

Поскольку в юниверс добавлен дополнительный плагин 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();
}

Ответ 5

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

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

$("<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);
});

Ответ 6

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

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

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

<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");
    });

});

Ответ 7

Я расширяю решение 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');  
});

Ответ 8

Я сделал лучшую версию кода @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");
            }
        });






    });
});

Ответ 9

Посмотрите здесь этот пример 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");
        }
    });
}