如何将font-size设置为div大小的100％？

Question

I have a div with a static size. Sometimes longer text than the div will be placed there. Is there anyway to achieve the text fitting the div width at all times through JavaScript alone ? I am aware there are jQuery fixes but need a pure JS solution in this case.

Even if you have a link to a demo/tutorial that would be helpful, thanks.

Answer 1

Here you go, this should do what you want: JSFiddle

Basically the key here is to check the output.scrollHeight against output.height . Consider the following setup:

HTML:

<button onclick="addText(); resizeFont()">Click Me to Add Some Text!</button>
<div id="output"></div>

CSS:

div {
    width: 160px;
    height: 160px;
}

This creates a square div and fills it with a randomly long string of text via the addText() method.

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(', ');
}

The magic lies in the resizeFont() function. Basically what this does is, once the text has been added, it sets the fontSize of the div to be equal to its own height. This is the base case for when you have a string of 1 character (ie the fontSize will equal the height). As the length of your string grows, the fontSize will need to be made smaller until the scrollHeight equals the height of the 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';
}

The nice thing about this method is that you can easily attach an event listener to the resize event of the window, making the text dynamically resize as the user changes the window size: http://jsfiddle.net/QvDy8/2/

window.onload = function() {
  window.addEventListener('resize', resizeFont, false);
}