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

ProgramBox

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

Post author:admin
Запись опубликована:22 апреля, 2023
Post category:Вопросы по программированию

#jquery #html #css #font-size

#jquery #HTML #css #размер шрифта

Вопрос:

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

1. Можете ли вы пояснить, что вы подразумеваете под «исправляется автоматически»

2. Вы спрашиваете, как изменить размер текста, чтобы он соответствовал вашему размеру DIV?

Ответ №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" );
    }
});

1. Если вы добавите это while( $('#fitin').height() > $('#fitin div').height() ) { $('#fitin div').css('font-size', (parseInt($('#fitin div').css('font-size')) 1) "px" ); } , то вы также сможете увеличить размер шрифта

2. @Web_Designer Это работает потрясающе. Но текст не будет иметь маленького размера шрифта, если я обновляю окно после изменения размера. Есть ли какая-либо альтернатива для этого? Спасибо

Ответ №2:

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

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

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

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

Загрузите FlowType с GitHub и включите ссылку на него в свой элемент head
```
 flowtype.jQuery.js
  
```
Вызов 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 для определения размера блока, взгляните:

Не спрашивайте меня, зачем мне нужна таблица 🙂 , функция width лучше всего работает с таблицами… в 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 amp;amp; $('#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 amp;amp; $('#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, возможно, это сэкономит кому-то время 🙂

(Просто добавьте класс с ИЗМЕНЯЕМЫМ размером в 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");
        }
    });
}