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

Question

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

UPD:JQuery是不可接受的.Pure 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;
  }
}

演示.

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

Answer 2

您可以像这样使用jQuery Text Fill.

1. 加载插件: <script src="jquery.textfill.js" ></script>

2. 放一个id <input type="text" id="dyntext" value="e=mc²"></input>

3. 使用代码做魔术.最好把它放在<script>标签中:

最终结果将如下所示:

 function update() {
  var size = parseInt($('#maxsize').val(), 10);
  if (!isNaN(size)) {
    $('.dyntextval').html($('#dyntext').val());
    $('.jtextfill').textfill({debug: true, maxFontPixels: size});
  }
}

$(function () {
  $('#maxsize').keyup(update);
  $('#dyntext').keyup(update);
  update()
});