Авто размер шрифта в зависимости от ширины DIV - PullRequest
0 голосов
/ 07 февраля 2019

Я пытаюсь заменить изображения 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');
}

Ответы [ 3 ]

0 голосов
/ 07 февраля 2019

вы используете #leftsidebuttons {white-space: nowrap;} и затем {word-wrap: break-word;} для класса .leftsidebuttons !!

0 голосов
/ 07 февраля 2019

Есть много проблем, которые вам нужно исправить:

  • несколько элементов с одинаковым идентификатором
  • не используйте div для кнопки
  • , такой подходочень медленный, в основном он пытается каждый размер шрифта, пока он не подойдет.

, если вы измените div на button с auto, он будет работать.

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

0 голосов
/ 07 февраля 2019

Удаление white-space:nowrap должно сделать работу.

...