我有一个固定大小的html div和一个用于输入文本的附加HTML输入框。然后,此文本显示在div中。
我希望文本始终居中,并且始终是字符串中字符数可能的最大尺寸。
我已经提出了一个可行的原型,但它不能很好地工作。文本的大小并不总是正确的。
function bindText(readElement, writeElement, extra){
//the text from the input form triggered by onkeyup event
var textStr = document.getElementById(readElement).value;
//the div to write the text to
var element = document.getElementById(writeElement);
//the major part of the function that I have just brute forced to try and work out
if(textStr.length > 0){
//check the length of the string
if(textStr.length > 8 && textStr.length < 12){
//set a the font size accordingly
element.style.fontSize = 150;
}
//same again
if(textStr.length >= 12 && textStr.length < 16){
element.style.fontSize = 120;
}
if(textStr.length >= 16 && textStr.length < 20){
element.style.fontSize = 100;
}
if(textStr.length >= 20 && textStr.length < 25){
element.style.fontSize = 80;
}
if(textStr.length >= 25 && textStr.length < 32){
element.style.fontSize = 55;
}
if(textStr.length >= 32 && textStr.length < 40){
element.style.fontSize = 50;
}
if(textStr.length >= 40 && textStr.length < 50){
element.style.fontSize = 45;
}
if(textStr.length >= 76){
element = textStr.splice(0, 75);
}
}
}
是否有更优雅的解决方案可以获得更一致的结果。?
提前致谢
答案 0 :(得分:2)
正如我在你的近似字体大小和文本长度之间所看到的那样:
我在表格中为此做了插值:
你可以用参数看到这个结果:
现在,您可以将所有if
和else if
替换为一个用于字体大小h
计算的公式,并将min(h, max_font_size)
和max(min_font_size, h)
用于设置字体最小和最大尺寸。
function bindText(readElement, writeElement, extra){
var textStr = document.getElementById(readElement).value;
var element = document.getElementById(writeElement);
var x, h;
x = textStr.length;
h = Math.exp(-0.1 * x + 6) + 38;
h = Math.min(h, 120);
h = Math.max(h, 45);
element = textStr.splice(0, 75);// as you wish and it is not my business why %)
element.style.fontSize = h;
return (0);
}
答案 1 :(得分:1)
您实际上可以构建一个试错算法来修改文本的font-size
,直到它的大小合适。
我现在没有时间写它,所以这里有一个类似伪代码的东西:
test_element = clone(element);
test_element.innerText = text;
test_element.style.left = '-9999px'; // so that it would be hidden from the user
for(var i = maxFontSize; i > minFontSize; i--)
{
test_element.style.fontSize = i + 'px';
if(test_element.width <= element.width && test_element.height <= element.height)
break;
}
// and the fontSize is stored in the `i` var
<强>更新强>
没有测试过,但这是我正在考虑的算法:
function getFontSize(text, width){
var minFontSize = 1,
maxFontSize = 200,
testElement = document.createElement('span'),
fontSize = null;
testElement.style.position = 'absolute';
testElement.style.left = '-999999px';
testElement.style.top = '-999999px';
document.body.appendChild(testElement);
testElement.innerText = text;
for(var i = minFontSize; i <= maxFontSize; i++)
{
testElement.style.fontSize = i + 'px';
if(testElement.offsetWidth > width)
{
fontSize = Math.max(minFontSize, i-1);
break;
}
}
if(fontSize == null)
fontSize = i;
document.removeChild(testElement);
return fontSize + 'px';
}
function bindText(readElement, writeElement){
//the text from the input form triggered by onkeyup event
var textStr = document.getElementById(readElement).value;
//the div to write the text to
var element = document.getElementById(writeElement);
//the major part of the function that I have just brute forced to try and work out
if(textStr.length > 0){
element.style.fontSize = getFontSize(textStr, element.outerOffset);
// aditional, you can set the text-align property to center
// element.style.textAlign = 'center';
}
}