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

Question

I'm trying to replace JPG images with some HTML code. The blank outline of the buttons will still be used for the standard button, plus the hover, but I want the text within the button to be handled via code.

But the issue is that some of the buttons have multiple words with multiple lines, where-as others are only a couple words.

I'd like to get the font-size for the buttons to be dynamic and not set and then also word-wrap and adjust accordingly.

I found this which sort-of does what I'd like: Font-size depends on div width and height

But I need to the text to word-wrap.

Here's my example which I cant seem to get to work properly. 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

you use #leftsidebuttons { white-space:nowrap; } and then {word-wrap: break-word;} for the class .leftsidebuttons!!

Answer 3

There are many problem that you would need to fix:

• multiple element with same id
• don't use div for button
• that approach is very slow, basically it tries each font size until it fits.

if you change the div to button with auto it will work.

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