Я пытаюсь заменить изображения JPG некоторым кодом HTML.Пустой контур кнопок будет по-прежнему использоваться для стандартной кнопки плюс наведение курсора, но я хочу, чтобы текст внутри кнопки обрабатывался с помощью кода.
Но проблема в том, что некоторые кнопки имеют несколькослова с несколькими строками, где, поскольку другие - всего лишь пара слов.
Я бы хотел, чтобы размер шрифта для кнопок был динамическим и не заданным, а затем также перенос по словам и корректировка соответствующим образом.
Я нашел вот что делает то, что хотел бы: Размер шрифта зависит от ширины и высоты div
Но мне нужно, чтобы текст в слово-wrap.
Вот мой пример, который я не могу заставить работать должным образом.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');
}