根据字符串长度调整字体大小 [英] Resize font depending on string length

问题描述

我有一个垂直菜单，我想让它可以本地化，但本地化的字符串在菜单元素中往往会走出边缘。

所以问题是如何使字体可调整大小根据字符串长度在CSS。如果可能，没有JavaScript。

谢谢！

I have a vertical menu and i want to make it localizable, but localized strings in menu elements often goes out off the edge.
So the question is how to make font resizable depending on the string length in CSS. And if possible, without JavaScript.
Thanks!

UPD：JQuery是不能接受的。任何方式在Pure JS？

UPD: JQuery isn't acceptable. Any way in Pure JS?

推荐答案

你应该熟悉使用插件，他们节省了很多时间，非常可靠（它们由有经验的脚本/程序员编写并且已经由社区测试）。但是看起来你想要一些纯JS解决方案。我刚刚为你代码。它工作相当OK（虽然我不知道如果它是一样好的插件）。唯一的要求是元素（您要根据文本长度调整字体大小） 应包含纯文本 ，而不是某些HTML代码。

You should make familiar with using plugins, they save you much time and of course they're very reliable (they are written by experienced scripters/programmers and have been tested by community). However looks like you want some pure JS solution. I've just made this code for you. It works fairly OK (although I'm not sure if it's as good as some plugins). The only requirement is the element (which you want to adjust the font-size accordingly to the text length) should contain plain text, not some HTML code.

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

The idea to implement it using pure JS is simple, you need some dummy element created using script, this dummy element is used to measure the size of the text. We need to adjust the font-size of the dummy element until the size of the text (as well as of the dummy element) should be confined to the size of the element (whose font-size you want to adjust). I made the code very clearly, hope you understand it better after reading the code:

//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 是越南语意义 Chrysanthemum ，而第二个菜单＃menu2 当然是英语单词菊花。它们有很大的不同长度，但两者都应该有固定宽度 100px ，因此第二个菜单＃menu2 具有较小的字体大小以适应空格。

Demo.

In the demo, you can see that the first menu #menu1 is the Vietnamese word meaning Chrysanthemum while the second menu #menu2 is of course the English word Chrysanthemum. They have much different length, however both are supposed to have fixed width of 100px, hence the second menu #menu2 should have smaller font-size to fit the space.

这篇关于根据字符串长度调整字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！