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

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

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

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

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

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

我最近想要一些类似的东西：

 
 
This text won't be resized and will go out of the div.
 
This text will be resized and wont go out of the 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 = $(' 

要使用此插件，您只需要拨打电话

  $(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 = $("
", { 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：

 
 Insert text from slipsum here.  

你这样称呼它：

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

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

Answer 5

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

要求 ：

1. 包含文本的类具有“resize”类。
2. 它包含高度和宽度（％，px，等等……）

这个版本有什么变化？

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

注意：

我不认为代码是生产就绪的。 但如果您发现可以增强的内容，请与社区分享。

 var autoSizeText; 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; } 

  
 I am a sizable div and I have explicit width and height.  

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 

尝试调整它的大小

         
 
Because too much "light" doesn't illuminate our paths and warm us, it only blinds and burns us.
 
     

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