我需要显示用户输入的文本到一个固定大小的div。我想要的是字体大小自动调整，以便文本尽可能多地填充框。
如果div是400px x 300px。如果有人输入ABC，那么字体就很大。如果他们输入一个段落，那么它将是一个很小的字体。
我可能想要从最大字体大小开始——可能是32px，当文本太大而不适合容器时，缩小字体大小直到它适合。
当前回答
我找到了一种方法来防止使用循环来缩小文本。它通过将字体大小乘以容器宽度和内容宽度之间的比率来调整字体大小。因此，如果容器的宽度是内容的1/3，字体大小将减少1/3，容器的宽度也将减少1/3。为了扩大规模，我使用了while循环，直到内容大于容器。
function fitText(outputSelector){
// max font size in pixels
const maxFontSize = 50;
// get the DOM output element by its selector
let outputDiv = document.getElementById(outputSelector);
// get element's width
let width = outputDiv.clientWidth;
// get content's width
let contentWidth = outputDiv.scrollWidth;
// get fontSize
let fontSize = parseInt(window.getComputedStyle(outputDiv, null).getPropertyValue('font-size'),10);
// if content's width is bigger than elements width - overflow
if (contentWidth > width){
fontSize = Math.ceil(fontSize * width/contentWidth,10);
fontSize = fontSize > maxFontSize ? fontSize = maxFontSize : fontSize - 1;
outputDiv.style.fontSize = fontSize+'px';
}else{
// content is smaller than width... let's resize in 1 px until it fits
while (contentWidth === width && fontSize < maxFontSize){
fontSize = Math.ceil(fontSize) + 1;
fontSize = fontSize > maxFontSize ? fontSize = maxFontSize : fontSize;
outputDiv.style.fontSize = fontSize+'px';
// update widths
width = outputDiv.clientWidth;
contentWidth = outputDiv.scrollWidth;
if (contentWidth > width){
outputDiv.style.fontSize = fontSize-1+'px';
}
}
}
}
这段代码是我上传到Github https://github.com/ricardobrg/fitText/的测试的一部分
其他回答
它使用二分搜索，进行10次迭代。最简单的方法是执行while循环，并将字体大小增加1，直到元素开始溢出。可以使用element来确定元素何时开始溢出。offsetHeight和element.scrollHeight。如果scrollHeight大于offsetHeight，则字体大小过大。
二分搜索是一个更好的算法。它还受到希望执行的迭代次数的限制。只需调用flexFont并插入div id，它将在8px到96px之间调整字体大小。
我花了一些时间研究这个主题，并尝试了不同的库，但最终我认为这是最简单、最直接的解决方案。
注意，如果你愿意，你可以更改使用offsetWidth和scrollWidth，或者将两者都添加到这个函数中。
// Set the font size using overflow property and div height
function flexFont(divId) {
var content = document.getElementById(divId);
content.style.fontSize = determineMaxFontSize(content, 8, 96, 10, 0) + "px";
};
// Use binary search to determine font size
function determineMaxFontSize(content, min, max, iterations, lastSizeNotTooBig) {
if (iterations === 0) {
return lastSizeNotTooBig;
}
var obj = fontSizeTooBig(content, min, lastSizeNotTooBig);
// if `min` too big {....min.....max.....}
// search between (avg(min, lastSizeTooSmall)), min)
// if `min` too small, search between (avg(min,max), max)
// keep track of iterations, and the last font size that was not too big
if (obj.tooBig) {
(lastSizeTooSmall === -1) ?
determineMaxFontSize(content, min / 2, min, iterations - 1, obj.lastSizeNotTooBig, lastSizeTooSmall) :
determineMaxFontSize(content, (min + lastSizeTooSmall) / 2, min, iterations - 1, obj.lastSizeNotTooBig, lastSizeTooSmall);
} else {
determineMaxFontSize(content, (min + max) / 2, max, iterations - 1, obj.lastSizeNotTooBig, min);
}
}
// determine if fontSize is too big based on scrollHeight and offsetHeight,
// keep track of last value that did not overflow
function fontSizeTooBig(content, fontSize, lastSizeNotTooBig) {
content.style.fontSize = fontSize + "px";
var tooBig = content.scrollHeight > content.offsetHeight;
return {
tooBig: tooBig,
lastSizeNotTooBig: tooBig ? lastSizeNotTooBig : fontSize
};
}
尽管我很喜欢这个答案偶尔得到的点赞(谢谢!)，但这真的不是解决这个问题的最好方法。请在这里查看其他一些精彩的答案，特别是那些没有循环的答案。
不过，为了便于参考，以下是我最初的答案:
<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>
大多数其他答案使用循环来减少字体大小，直到它适合div，这是非常缓慢的，因为页面需要重新渲染元素每次字体改变大小。我最终不得不编写自己的算法，使它能够定期更新内容，而不会冻结用户浏览器。我添加了一些其他功能(旋转文本，添加填充)，并将其打包为jQuery插件，你可以在:
https://github.com/DanielHoffmann/jquery-bigtext
简单的电话
$("#text").bigText();
它会非常适合你的容器。
在这里看到它的行动:
http://danielhoffmann.github.io/jquery-bigtext/
现在它有一些限制，div必须有固定的高度和宽度，它不支持将文本包装成多行。
我将努力获得一个选项来设置最大字体大小。
编辑:我发现了更多的问题与插件，它不处理其他盒子模型除了标准的和div不能有边缘或边界。我会努力的。
Edit2:我现在已经修复了这些问题和限制，并添加了更多选项。你可以设置最大字体大小，你也可以选择限制字体大小使用宽度，高度或两者。我将在包装器元素中接受max-width和max-height值。
Edit3:我已经将插件更新到1.2.0版本。对代码和新选项(verticalAlign, horizontalAlign, textAlign)进行了重大清理，并支持span标签内的内部元素(如换行或字体很棒的图标)。
我得到了同样的问题，解决方案基本上是使用javascript来控制字体大小。 在codepen上检查这个例子:
https://codepen.io/ThePostModernPlatonic/pen/BZKzVR
这只是一个高度的例子，也许你需要放一些关于宽度的if。
试着调整它的大小
<!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>
这是我最后得到的结果:
这是该插件的链接: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>
推荐文章
- 使伸缩项目正确浮动
- 可以在setInterval()内部调用clearInterval()吗?
- 无法读取未定义的属性“msie”- jQuery工具
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- jQuery:执行同步AJAX请求
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- jQuery表格排序
- 如何禁用文本选择使用jQuery?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
