我需要显示用户输入的文本到一个固定大小的div。我想要的是字体大小自动调整，以便文本尽可能多地填充框。
如果div是400px x 300px。如果有人输入ABC，那么字体就很大。如果他们输入一个段落，那么它将是一个很小的字体。
我可能想要从最大字体大小开始——可能是32px，当文本太大而不适合容器时，缩小字体大小直到它适合。
当前回答
只是想增加我的内容表版本。
$.fn.fitInText = function() { this.each(function() { let textbox = $(this); let textboxNode = this; let mutationCallback = function(mutationsList, observer) { if (observer) { observer.disconnect(); } textbox.css('font-size', 0); let desiredHeight = textbox.css('height'); for (i = 12; i < 50; i++) { textbox.css('font-size', i); if (textbox.css('height') > desiredHeight) { textbox.css('font-size', i - 1); break; } } var config = { attributes: true, childList: true, subtree: true, characterData: true }; let newobserver = new MutationObserver(mutationCallback); newobserver.observe(textboxNode, config); }; mutationCallback(); }); } $('#inner').fitInText(); #outer { display: table; width: 100%; } #inner { border: 1px solid black; height: 170px; text-align: center; display: table-cell; vertical-align: middle; word-break: break-all; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="outer"> <div id="inner" contenteditable=true> TEST </div> </div>
其他回答
这是我最后得到的结果:
这是该插件的链接:https://plugins.jquery.com/textfill/ 还有一个来源的链接:http://jquery-textfill.github.io/
;(function($) {
$.fn.textfill = function(options) {
var fontSize = options.maxFontPixels;
var ourText = $('span:visible:first', this);
var maxHeight = $(this).height();
var maxWidth = $(this).width();
var textHeight;
var textWidth;
do {
ourText.css('font-size', fontSize);
textHeight = ourText.height();
textWidth = ourText.width();
fontSize = fontSize - 1;
} while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
return this;
}
})(jQuery);
$(document).ready(function() {
$('.jtextfill').textfill({ maxFontPixels: 36 });
});
我的HTML是这样的
<div class='jtextfill' style='width:100px;height:50px;'>
<span>My Text Here</span>
</div>
我用geekMonkey解决方案，但它太慢了。他所做的就是将字体大小调整到最大(maxFontPixels)，然后检查它是否适合容器。否则，它将字体大小减小1px，并再次检查。为什么不简单地检查前一个容器的高度并提交该值呢?(是的，我知道为什么，但我现在做了一个解决方案，这只适用于高度，也有一个最小/最大选项)
这里有一个更快的解决方案:
var index_letters_resize;
(index_letters_resize = function() {
$(".textfill").each(function() {
var
$this = $(this),
height = Math.min( Math.max( parseInt( $this.height() ), 40 ), 150 );
$this.find(".size-adjust").css({
fontSize: height
});
});
}).call();
$(window).on('resize', function() {
index_letters_resize();
);
这就是HTML:
<div class="textfill">
<span class="size-adjust">adjusted element</span>
other variable stuff that defines the container size
</div>
同样，这个解决方案只检查容器的高度。这就是为什么这个函数不需要检查元素是否在里面。但我也实现了一个最小/最大值(40min, 150max)，所以对我来说，这是完美的(也适用于窗口大小调整)。
尽管我很喜欢这个答案偶尔得到的点赞(谢谢!)，但这真的不是解决这个问题的最好方法。请在这里查看其他一些精彩的答案，特别是那些没有循环的答案。
不过，为了便于参考，以下是我最初的答案:
<html>
<head>
<style type="text/css">
#dynamicDiv
{
background: #CCCCCC;
width: 300px;
height: 100px;
font-size: 64px;
overflow: hidden;
}
</style>
<script type="text/javascript">
function shrink()
{
var textSpan = document.getElementById("dynamicSpan");
var textDiv = document.getElementById("dynamicDiv");
textSpan.style.fontSize = 64;
while(textSpan.offsetHeight > textDiv.offsetHeight)
{
textSpan.style.fontSize = parseInt(textSpan.style.fontSize) - 1;
}
}
</script>
</head>
<body onload="shrink()">
<div id="dynamicDiv"><span id="dynamicSpan">DYNAMIC FONT</span></div>
</body>
</html>
下面是一个带有类的版本:
<html>
<head>
<style type="text/css">
.dynamicDiv
{
background: #CCCCCC;
width: 300px;
height: 100px;
font-size: 64px;
overflow: hidden;
}
</style>
<script type="text/javascript">
function shrink()
{
var textDivs = document.getElementsByClassName("dynamicDiv");
var textDivsLength = textDivs.length;
// Loop through all of the dynamic divs on the page
for(var i=0; i<textDivsLength; i++) {
var textDiv = textDivs[i];
// Loop through all of the dynamic spans within the div
var textSpan = textDiv.getElementsByClassName("dynamicSpan")[0];
// Use the same looping logic as before
textSpan.style.fontSize = 64;
while(textSpan.offsetHeight > textDiv.offsetHeight)
{
textSpan.style.fontSize = parseInt(textSpan.style.fontSize) - 1;
}
}
}
</script>
</head>
<body onload="shrink()">
<div class="dynamicDiv"><span class="dynamicSpan">DYNAMIC FONT</span></div>
<div class="dynamicDiv"><span class="dynamicSpan">ANOTHER DYNAMIC FONT</span></div>
<div class="dynamicDiv"><span class="dynamicSpan">AND YET ANOTHER DYNAMIC FONT</span></div>
</body>
</html>
这是基于GeekyMonkey上面发布的内容，并进行了一些修改。
; (function($) {
/**
* Resize inner element to fit the outer element
* @author Some modifications by Sandstrom
* @author Code based on earlier works by Russ Painter (WebDesign@GeekyMonkey.com)
* @version 0.2
*/
$.fn.textfill = function(options) {
options = jQuery.extend({
maxFontSize: null,
minFontSize: 8,
step: 1
}, options);
return this.each(function() {
var innerElements = $(this).children(':visible'),
fontSize = options.maxFontSize || innerElements.css("font-size"), // use current font-size by default
maxHeight = $(this).height(),
maxWidth = $(this).width(),
innerHeight,
innerWidth;
do {
innerElements.css('font-size', fontSize);
// use the combined height of all children, eg. multiple <p> elements.
innerHeight = $.map(innerElements, function(e) {
return $(e).outerHeight();
}).reduce(function(p, c) {
return p + c;
}, 0);
innerWidth = innerElements.outerWidth(); // assumes that all inner elements have the same width
fontSize = fontSize - options.step;
} while ((innerHeight > maxHeight || innerWidth > maxWidth) && fontSize > options.minFontSize);
});
};
})(jQuery);
这是我对OP的答案的修改。
简而言之，许多尝试优化此功能的人抱怨使用了循环。是的，虽然循环可能很慢，但其他方法可能不准确。
因此，我的方法是使用二进制搜索来找到最好的字体大小:
$.fn.textfill = function()
{
var self = $(this);
var parent = self.parent();
var attr = self.attr('max-font-size');
var maxFontSize = parseInt(attr, 10);
var unit = attr.replace(maxFontSize, "");
var minFontSize = parseInt(self.attr('min-font-size').replace(unit, ""));
var fontSize = (maxFontSize + minFontSize) / 2;
var maxHeight = parent.height();
var maxWidth = parent.width();
var textHeight;
var textWidth;
do
{
self.css('font-size', fontSize + unit);
textHeight = self.height();
textWidth = self.width();
if(textHeight > maxHeight || textWidth > maxWidth)
{
maxFontSize = fontSize;
fontSize = Math.floor((fontSize + minFontSize) / 2);
}
else if(textHeight < maxHeight || textWidth < maxWidth)
{
minFontSize = fontSize;
fontSize = Math.floor((fontSize + maxFontSize) / 2);
}
else
break;
}
while(maxFontSize - minFontSize > 1 && maxFontSize > minFontSize);
self.css('font-size', fontSize + unit);
return this;
}
function resizeText()
{
$(".textfill").textfill();
}
$(document).ready(resizeText);
$(window).resize(resizeText);
这也允许元素指定最小和最大字体:
<div class="container">
<div class="textfill" min-font-size="10px" max-font-size="72px">
Text that will fill the container, to the best of its abilities, and it will <i>never</i> have overflow.
</div>
</div>
此外，该算法是无单位的。你可以指定em, rem， %等，它将使用它的最终结果。
这是小提琴:https://jsfiddle.net/fkhqhnqe/1/
推荐文章
- 使伸缩项目正确浮动
- 可以在setInterval()内部调用clearInterval()吗?
- 无法读取未定义的属性“msie”- jQuery工具
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- jQuery:执行同步AJAX请求
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- jQuery表格排序
- 如何禁用文本选择使用jQuery?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
