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

Question

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

UPD:JQuery 是 Not Acceptable 。纯 JS 中的任何方式？

Answer 1

您应该熟悉使用插件，它们可以为您节省很多时间，当然它们也非常可靠(它们由经验丰富的脚本编写者/程序员编写，并且已经过社区测试)。但是看起来你想要一些纯 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.

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