我有一个静态大小的div。有时比div更长的文本。无论如何通过单独的JavaScript 来实现适合div宽度的文本?我知道有jQuery修复,但在这种情况下需要纯JS解决方案。
即使你有一个有用的演示/教程链接,谢谢。
答案 0 :(得分:0)
在这里,你应该做你想做的事: JSFiddle
这里的关键基本上是针对output.scrollHeight
检查output.height
。请考虑以下设置:
<强> HTML:强>
<button onclick="addText(); resizeFont()">Click Me to Add Some Text!</button>
<div id="output"></div>
<强> CSS:强>
div {
width: 160px;
height: 160px;
}
这会创建一个方形div,并通过addText()
方法用随机长的文本字符串填充它。
function addText() {
var text = "Lorem ipsum dolor amit",
len = Math.floor(Math.random() * 15),
output = document.querySelector('#output'),
str = [];
for (; --len;)
str.push(text);
output.innerHTML = str.join(', ');
}
神奇之处在于resizeFont()
功能。基本上它的作用是,一旦添加了文本,它就会将fontSize
的{{1}}设置为等于它自己的高度。这是当你有一个1个字符的字符串时的基本情况(即div
将等于高度)。随着字符串长度的增加,fontSize
需要缩小,直到fontSize
等于scrollHeight
的高度
div
这个方法的好处是你可以轻松地将事件监听器附加到窗口的function resizeFont() {
var output = document.querySelector('#output'),
numRE = /(\d+)px/,
height = numRE.exec(window.getComputedStyle(output).height)[1],
fontSize = height;
// allow div to be empty without entering infinite loop
if (!output.innerHTML.length) return;
// set the initial font size to the height of the div
output.style.fontSize = fontSize + 'px';
// decrease the font size until the scrollHeight == height
while (output.scrollHeight > height)
output.style.fontSize = --fontSize + 'px';
}
事件,使文本在用户更改窗口大小时动态调整大小:http://jsfiddle.net/QvDy8/2/
resize