Question

我提前道歉，因为我知道这个问题之前出现了很多次，但我似乎无法找到正确的解决方案（相信我，我已经尝试了一些！）

基本上它是旧的“在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的整个高度和宽度”。 < / p>

如果我没有很好地解释自己，我附上了一张图片，解释了我面临的问题以及我正在寻找的解决方案。

非常感谢任何帮助。谢谢。

enter image description here

Answer 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

Answer 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
}

Fiddler在jsfiddle.net/mn4rr/1/。

Answer 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分钟的时间，想知道为什么上面的代码在我的页面上造成无限循环。

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

这不是最好的方法，但它足以让你继续，我会想象（加上它有效）。

Answer 5

这是给定答案的略微修改版本。

要求：

包含文本的类具有＆＃34; resize＆＃34;类。
它包含高度和宽度（％，px，等等......）

此版本有哪些变化？

我添加了resizing（通过将事件调整大小绑定到函数）autoSizeText。这远非理想，但如果我们不进行大量调整，那就应该没问题。
在以前的版本中，文字只会变小。现在它试图找到最大的字体而不会超出div。

注意：

我没有声称代码已准备就绪。但如果您发现可以增强的内容，请与社区分享。

＆＃13;

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

＆＃13;

.sizable{
 width: 50vw;
 height: 50vh;
 border: 2px solid darkred;
}

＆＃13;

<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>

＆＃13;

Answer 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是parent，align-text是child div。您必须指定父元素的高度和宽度。在resize中，您可以使用jquery设置父元素的高度和宽度，然后调用此函数。

我编写此代码是因为我尝试了很多插件，但它们不支持调整窗口大小。

Answer 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>

Answer 8

这是我的版本。这是在React项目上使用ES6构建的。

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

Answer 9

最近，我有一个最大宽度div，它从文本输入字段接收文本，我必须使文本适合该div，所以这就是我的解决方法（简单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 && fontSize < defaultFontSize ) {
        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
/* THE BORDER IS FOR TEST PURPOSES TO SEE WHAT'S HAPPENING WITH THE DIV*/
}

<input type="text" id="nameInput" oninput="addName()">
<div id="name" style="font-size: 50px;"></div>

在div（高度和宽度）内完美匹配文本而不影响div的大小

9 个答案: