Auto font-size depending on DIV width

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');
}

score 0 · Answer 1 · answered Feb 07 '19 at 17:33

0

Removing white-space:nowrap should do the job.

answered Feb 07 '19 at 17:33

Vinícius Philot

9
3

score 0 · Answer 2 · answered Feb 07 '19 at 17:40

0

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

answered Feb 07 '19 at 17:40

S_A_Gh

55
5

score 0 · Answer 3 · answered Feb 07 '19 at 18:02

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/

Auto font-size depending on DIV width

3 Answers3