自动字体大小取决于DIV宽度

Question

我试图用一些HTML代码来替换JPG图片。按钮的空白轮廓仍然会被用于标准按钮，再加上悬停，但我想在按钮中的文本通过代码来处理。

但问题是，一些按键具有多行多字，其中，像其他人一样只是一对夫妇的话。

我想获得的字体大小的按钮是动态的，而不是设置，然后又自动换行，并相应地调整。

我发现这里面排序的确实想什么我：Font-size depends on div width and height

但我需要的文本自动换行。

这里是我的例子中，我似乎无法得到正常工作。 https://jsfiddle.net/5L39xq1n/

<div style="text-align:center;padding:20px 0;">DIV Button Test</div>

<div id="buttoncontainer">
    <div id="leftsidebuttons" class="leftsidebuttons">
        Multiple lines because of the number of words
    </div>
    <div id="leftsidebuttons" class="leftsidebuttons">
        Single Line
    </div>
    <div id="leftsidebuttons" class="leftsidebuttons">
        This is another multiple line button
    </div>
</div>

#buttoncontainer { width:175px; height:46px; line-height:46px; }

#leftsidebuttons { white-space:nowrap; }

.leftsidebuttons { color:#d5a200 !important; 
  background-color:blue;
  font-family: Arial, Helvetica, sans-serif;
    font-style:italic; 
  font-weight:700; 
  margin:5px 0;
  text-align:center; 
    word-wrap: break-word; 
}

.leftsidebuttons:hover { color:#ffcc00 !important; 
    background-color:red;
    text-align:center; 
}

var container = $("#buttoncontainer"),
text_container = $("#leftsidebuttons"),
start_size = 16,
container_width = container.width();

text_container.css('font-size', start_size + 'px');

while (text_container.width() > container_width) {
    text_container.css('font-size', start_size--+'px');
}

Answer 1

删除white-space:nowrap应该做的工作。

Answer 2

您使用#leftsidebuttons {空白：NOWRAP; }和{自动换行：打破字;}为类.leftsidebuttons !!

Answer 3

有很多问题，你将需要解决：

• 具有相同ID的多个元件
• 不要使用DIV的按钮
• 这种做法是非常缓慢的，基本上它尝试每个字体的大小，直到它适合。

如果你改变了div与button也将努力auto。

https://jsfiddle.net/357d2ka6/1/