根据字符串长度调整字体大小

我有一个垂直菜单，我想使其可本地化，但菜单元素中的本地化字符串经常超出边缘。
所以问题是如何根据 CSS 中的字符串长度调整字体大小。如果可能的话，不使用 JavaScript。
Thanks!

UPD：JQuery 不可接受。纯JS有什么办法吗？

您应该熟悉使用插件，它们可以节省您很多时间，当然它们非常可靠（它们是由经验丰富的脚本编写者/程序员编写的，并且已经过社区测试）。不过看起来你想要一些纯 JS 解决方案。我刚刚为你编写了这段代码。它工作得相当不错（尽管我不确定它是否和某些插件一样好）。唯一的要求是元素（您要根据文本长度调整字体大小）应包含纯文本，而不是一些 HTML 代码。

使用纯JS实现它的想法很简单，你需要使用脚本创建一些虚拟元素，这个虚拟元素用于测量文本的大小。我们需要调整虚拟元素的字体大小，直到文本（以及虚拟元素）的大小应限制在元素的大小（您要调整其字体大小）的范围内。我把代码写得很清楚了，希望你看完代码后能更好地理解：

//we just need 1 dummy element for the whole page.
var dummy = document.createElement('div');
dummy.className = 'dummy';
var inSingleLineMode, inMultilineMode;    
//function used to adjust the font-size of the element
//so that the width is fixed (single-line mode) or both the width and height are 
//fixed (multi-line mode), of course the text should be contained within 
//the fixed width and height.
function adjustFontSize(element, singleLine){
  if(!element.innerHTML) return;
  var elementStyle = getComputedStyle(element);        
  dummy.style.font = elementStyle.font;
  initMode(singleLine, function(){ dummy.style.width = elementStyle.width });
  dummy.style.padding = elementStyle.padding;
  dummy.style.boxSizing = elementStyle.boxSizing;
  dummy.innerHTML = element.innerHTML;
  document.body.appendChild(dummy);
  var dummyStyle = getComputedStyle(dummy);          
  while(singleLine ? parseInt(dummyStyle.width) < parseInt(elementStyle.width) :
                     parseInt(dummyStyle.height) < parseInt(elementStyle.height)){
    dummy.style.fontSize = parseFloat(dummyStyle.fontSize) + 1 + 'px';
    dummyStyle = getComputedStyle(dummy);
  }
  while(singleLine ? parseInt(dummyStyle.width) > parseInt(elementStyle.width) :
                     parseInt(dummyStyle.height) > parseInt(elementStyle.height)){
    dummy.style.fontSize = parseFloat(dummyStyle.fontSize) - 1 + 'px';
    dummyStyle = getComputedStyle(dummy);
  }    
  element.style.fontSize = dummyStyle.fontSize;
  document.body.removeChild(dummy);
}
function initMode(singleLine, callback){
  if(!dummy) return;
  if(singleLine&&!inSingleLineMode) {
    dummy.style.whiteSpace = 'nowrap';
    dummy.style.width = 'auto';
    dummy.style.display = "inline-block";
    inSingleLineMode = true;
    inMultiLineMode = false;
  } else if(!singleLine&&!inMultilineMode) {
    if(callback) callback();
    dummy.style.whiteSpace = 'initial';
    dummy.style.display = "block";
    dummy.style.wordWrap = 'break-word';
    inMultilineMode = true;
    inSingleLineMode = false;
  }
}

Demo. http://jsfiddle.net/dKW2m/5/

在演示中，您可以看到第一个菜单#menu1是越南语单词的意思菊花而第二个菜单#menu2当然是英文单词菊花。它们的长度有很大不同，但是两者都应该有固定的宽度100px，因此第二个菜单#menu2应该使用较小的字体大小以适应空间。