Полностью вписывайте текст внутри div (высота и ширина), не влияя на размер div

Я заранее извиняюсь, поскольку знаю, что этот вопрос возник много раз, но я просто не могу найти правильное решение (и поверьте, я попробовал несколько!)

В основном это старый " Fit текст отлично внутри div, не влияя на размер div". И если я не являюсь полным numpty, я считаю, что CSS не может этого сделать. Так что я имею в виду в основном, а не что-то вроде:

#someDiv {
font-size: 12px;
}

или...

#someDiv {
font-size: 1em;
}

... Я хочу сделать что-то вроде этого:

#someDiv {
font-size: fluid;
}

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

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

Я нашел несколько решений jQuery в Интернете, но они будут масштабировать только текст, чтобы он соответствовал ширине, но я хочу, чтобы он масштабировался и до высоты. Поэтому я хочу сказать jQuery:

"jQuery, найдите $(this) div и любой текст внутри него. Я хочу, чтобы вы масштабировали его так, чтобы он максимально увеличивал всю высоту и ширину div.

В случае, если я не очень хорошо объяснил себя, я добавил графику, объясняющую проблему, с которой я столкнулся, и решение, которое я ищу.

Любая помощь будет высоко оценена. Спасибо.

enter image description here

ОТВЕТЫ

Ответ 1

Здесь тот же ответ, но в Javascript

var autoSizeText;

autoSizeText = function() {
  var el, elements, _i, _len, _results;
  elements = $('.resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _results = [];
  for (_i = 0, _len = elements.length; _i < _len; _i++) {
    el = elements[_i];
    _results.push((function(el) {
      var resizeText, _results1;
      resizeText = function() {
        var elNewFontSize;
        elNewFontSize = (parseInt($(el).css('font-size').slice(0, -2)) - 1) + 'px';
        return $(el).css('font-size', elNewFontSize);
      };
      _results1 = [];
      while (el.scrollHeight > el.offsetHeight) {
        _results1.push(resizeText());
      }
       return _results1;
    })(el));
  }
  return _results;
};

$(document).ready(function() {
  return autoSizeText();
});

Кстати... если вам когда-нибудь понадобится конвертировать coffeescript в javascript, просто перейдите в js2coffee.org

Ответ 2

Недавно я хотел чего-то подобного:

<div class='container'>
    <div class='no-resize'>This text won't be resized and will go out of the div.</div>
    <div class='resize'>This text will be resized and wont go out of the div.</div>
</div>

и

.no-resize, .resize {
    width: 100px;
    height: 50px;
    border: 1px solid #000;
    color: #000;
    float: left;
    margin-left: 10px;
    font-size: 15px
}

Скрипач в jsfiddle.net/mn4rr/1/.

Ответ 3

У меня недостаточно репутации, чтобы прокомментировать принятый ответ, поэтому я сделал ответ. Если height имеет на нем css3-переход, ответы на вопросы autoSizeText() и $.resizeText имеют проблемы. Я сделал короткий плагин jquery, чтобы исправить это.

$.fn.resizeText = function (options) {

    var settings = $.extend({ maxfont: 40, minfont: 4 }, options);

    var style = $('<style>').html('.nodelays ' +
    '{ ' +
        '-moz-transition: none !important; ' +
        '-webkit-transition: none !important;' +
        '-o-transition: none !important; ' +
        'transition: none !important;' +
    '}');

    function shrink(el, fontsize, minfontsize)
    {
        if (fontsize < minfontsize) return;

        el.style.fontSize = fontsize + 'px';

        if (el.scrollHeight > el.offsetHeight) shrink(el, fontsize - 1, minfontsize);
    }

    $('head').append(style);

    $(this).each(function(index, el)
    {
        var element = $(el);

        element.addClass('nodelays');

        shrink(el, settings.maxfont, settings.minfont);

        element.removeClass('nodelays');
    });

    style.remove();
}

Чтобы использовать этот плагин, вам нужно только позвонить

 $(selector).resizeText();

Надеюсь, это поможет кому-то еще некоторое время устранить неполадки. Я потратил 20 минут на то, чтобы почесывать голову, задаваясь вопросом, почему этот код вызывает бесконечный цикл на моей странице.

Ответ 4

Я решил это, создав плагин jQuery, здесь: http://jsfiddle.net/c9YNz/2/ (Обновлено для изменения размеров окон)

Код для плагина просто уменьшает текст до размера 0.01em, а затем увеличивает его, чтобы он соответствовал, вот код плагина:

$.fn.resizeText = function () {
    var width = $(this).innerWidth();
    var height = $(this).innerHeight();
    var html =  $(this).html();
    var newElem = $("<div>", {
        html: html,
        style: "display: inline-block;overflow:hidden;font-size:0.1em;padding:0;margin:0;border:0;outline:0"
    });

    $(this).html(newElem);
    $.resizeText.increaseSize(10, 0.1, newElem, width, height);

    $(window).resize(function () {
        if ($.resizeText.interval)
            clearTimeout($.resizeText.interval)

        $.resizeText.interval = setTimeout(function () {
            elem.html(elem.find("div.createdResizeObject").first().html());
            elem.resizeText();
        }, 300);
    });
}

$.resizeText = {
    increaseSize: function (increment, start, newElem, width, height) {
        var fontSize = start;

        while (newElem.outerWidth() <= width && newElem.outerHeight() <= height) {
            fontSize += increment;
            newElem.css("font-size", fontSize + "em");
        }

        if (newElem.outerWidth() > width || newElem.outerHeight() > height) {
            fontSize -= increment;
            newElem.css("font-size", fontSize + "em");
            if (increment > 0.1) {
                $.resizeText.increaseSize(increment / 10, fontSize, newElem, width, height);
            }
        }
    }
};

Тогда, если у вас есть этот html:

<div class="resizeText" style="width:1200px;height:400px;">
Insert text from slipsum here.
</div>

Вы называете это следующим образом:

$(document).ready(function () {
    $(".resizeText").resizeText();
});

Это не лучший способ сделать это, но этого достаточно для вас, чтобы я мог подумать (плюс это работает).

Ответ 5

Здесь слегка модифицированный вариант приведенных ответов.

Требования:

  1. Класс, содержащий текст, имеет класс resize.
  2. он содержит высоту и ширину (%, px, что угодно...)

Какие изменения в этой версии?

  1. Я добавил изменение размера (связывая событие resize с функцией) autoSizeText. Это далеко от идеала, но если мы не сильно изменим размер, все будет хорошо.
  2. В предыдущих версиях текст только уменьшался. Теперь он пытается найти самый большой шрифт, не выходя за пределы div.

Замечания:

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

var autoSizeText = function () {
    var el, elements, _i, _len;
    elements = $('.resize');
    if (elements.length < 0) {
        return;
    }
    for (_i = 0, _len = elements.length; _i < _len; _i++) {
        el = elements[_i];
        dichoFit = function (el) {

            diminishText = function () {
                var elNewFontSize;
                elNewFontSize = (parseInt($(el).css('font-size').slice(0, -2)) - 1) + 'px';

                return $(el).css('font-size', elNewFontSize);
            };
            augmentText = function () {
                var elNewFontSize;
                elNewFontSize = (parseInt($(el).css('font-size').slice(0, -2)) + 1) + 'px';

                return $(el).css('font-size', elNewFontSize);
            };


            diminishText();
            while (el.scrollHeight < el.offsetHeight) {
                augmentText();
            }
            augmentText();
            while (el.scrollHeight > el.offsetHeight) {
                diminishText();
            }

        }
        dichoFit(el);
    }
};

$(document).ready(function () {
    autoSizeText();
    $(window).resize(function resizeText(){
        autoSizeText()
    })
});
.sizable{
 width: 50vw;
 height: 50vh;
 border: 2px solid darkred;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <div class='sizable resize'>
  I am a sizable div and I have explicit width and height.
</div>

Ответ 6

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

function fitTextInDiv(){
    if($this.find('.text-wrapper').height() > $this.find('.aligned-text').height() ){
        while( $this.find('.text-wrapper').height() > $this.find('.aligned-text').height() ) {
             $this.find('.aligned-text').css('font-size', (parseFloat($this.find('.aligned-text').css('font-size')) + 0.1) + "px" );
        }
    }
    else if($this.find('.text-wrapper').height() < $this.find('.aligned-text').height() ){
        while( $this.find('.text-wrapper').height() < $this.find('.aligned-text').height() ) {
            $this.find('.aligned-text').css('font-size', (parseFloat($this.find('.aligned-text').css('font-size')) - 0.1) + "px" );
        }

     }
}

Где text-wrapper является родительским, а aligned-text - дочерним div. Вы должны указать высоту и ширину родительского элемента. При изменении размера вы можете установить высоту и ширину родительского элемента, используя jquery, затем вызовите эту функцию.

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

Ответ 7

У меня такая же проблема, и решение в основном использует javascript для управления размером шрифта. Проверьте этот пример на codepen:

https://codepen.io/ThePostModernPlatonic/pen/BZKzVR

попробуйте изменить его размер

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style>
</style>
</head>
<body>
<div style="height:100vh;background-color: tomato;" id="wrap">        
  <h1 class="quote" id="quotee" style="padding-top: 56px">Because too much "light" doesn't <em>illuminate</em> our paths and warm us, it only blinds and burns us.</h1>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  var multiplexador = 3;
  initial_div_height = document.getElementById ("wrap").scrollHeight;
  setInterval(function(){ 
    var div = document.getElementById ("wrap");
    var frase = document.getElementById ("quotee");
    var message = "WIDTH div " + div.scrollWidth + "px. "+ frase.scrollWidth+"px. frase \n";
    message += "HEIGHT div " + initial_div_height + "px. "+ frase.scrollHeight+"px. frase \n";           
    if (frase.scrollHeight < initial_div_height - 30){
      multiplexador += 1;
      $("#quotee").css("font-size", multiplexador); 
    }
    console.log(message);          
  }, 10);
</script>
</html>

Ответ 8

Вот моя версия. Это связано с ES6 в проекте React.

export function autoSizeText(container, attempts=30) {
  let setChildrenToInheritFontSize = ( el ) => {
    el.style.fontSize = 'inherit';
    _.each( el.children, (child) => {
      setChildrenToInheritFontSize( child );
    });
  };


  let resizeText = (el) => {
    attempts--;
    let elNewFontSize;
    if( el.style.fontSize === "" ||  el.style.fontSize === "inherit" ||  el.style.fontSize === "NaN" ){
      elNewFontSize = '32px'; // largest font to start with
    } else {
      elNewFontSize = (parseInt(el.style.fontSize.slice(0, -2)) - 1) + 'px';
    }
    el.style.fontSize = elNewFontSize;

    // this function can crash the app, so we need to limit it
    if( attempts <= 0 ) {
      return;
    }

    if ( (el.scrollWidth > el.offsetWidth) || (el.scrollHeight > el.offsetHeight)) {
      resizeText(el);
    }
  };
  setChildrenToInheritFontSize( container );
  resizeText(container);
}

Ответ 9

Недавно у меня был элемент максимальной ширины, который получал текст из поля ввода текста, и мне пришлось сделать так, чтобы текст помещался в этот элемент, вот как я решил (простой JS, без плагина):

function addName(){
    let maxWidth = 550;
    let defaultFontSize = 50;
    let entry = document.getElementById('nameInput').value;
    let nameDiv = document.getElementById('name');
    let fontSize = nameDiv.style["font-size"];
    fontSize = fontSize.replace('px','');
    fontSize = parseInt(fontSize);
    nameDiv.innerText = entry;
    if (nameDiv.clientWidth > maxWidth) {
        fontSize = fontSize - 2.5;
        nameDiv.style["font-size"] = '${fontSize}px';
    } else if (nameDiv.clientWidth < maxWidth && defaultFontSize < 50) {
        fontSize = fontSize + 2.5;
        nameDiv.style["font-size"] = '${fontSize}px';
    }
}
#name {
    height: 70px;
    line-height: 70px;
    text-align: center;
    overflow: hidden;
    width: auto;
    display: table; /*THAT DOES THE MAGIC*/
    margin: auto;
    border: 1px solid black;
}
<input type="text" id="nameInput" oninput="addName()">
<div id="name" style="font-size: 50px;"></div>