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

Question

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

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

23

html jquery css font-size

Источник

user631915 24 май '11 в 15:09

9 ответов

Решение

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

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

7

Источник

user719539 22 авг '13 в 01:13

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

Сторона клиента

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

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

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

1

Источник

user75642 24 май '11 в 15:23

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

С тех пор в юниверс был добавлен дополнительный плагин 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

Источник

user960592 28 фев '14 в 10:12

Вот глобальная функция с аннотациями 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

Источник

user577782 17 дек '12 в 17:21

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

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

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

0

Источник

user159319 24 май '11 в 15:18

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

Источник

user5102058 27 дек '15 в 12:02

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

Источник

user1923992 17 дек '15 в 16:36

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

Источник

user3554127 03 май '16 в 16:52

Другие вопросы по тегам html jquery css font-size

user731323 24 май '11 в 15:30 2011-05-24 15:30 · Accepted Answer · 2011-05-24 15:30

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

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

Вот див

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