Размер шрифта для заполнения, чтобы заполнить кнопку

Question

У меня есть кнопка на моем загрузочном сайте.

<input type="submit" value="GET INSTANT ACCESS!"class="btn btn-lg"> 

Я использовал css, чтобы сделать его ширину 100%.

.btn-lg { 
     width: 100%; 
    } 

Я хотел бы, чтобы масштабировать текст внутри кнопки, чтобы заполнить всю ширину кнопки (которая заполняет ширину содержащего его дел). Тем не менее, я не хочу, чтобы текст приводил к ширине кнопки более 100% и растягивал div, в котором он содержится.

Я хотел бы, чтобы текст был масштабирован до ширины кнопки: , а не текст является малым или текст слишком большой и вызывает ширину веб-страницы, чтобы быть больше, чем ширина

Answer 1

устройства Если вы не хотите ширину вашей кнопки, чтобы быть больше, чем 100 %, вы должны добавить его в свой css: .btn-lg { width: 100%; max-width: 100%; }

Это не позволит увеличить вашу кнопку до 100%.

Answer 2

Если JS (jQuery) является приемлемым решением, см. my fiddle.

Вы можете использовать функцию fitText(elem) на событиях, где необходимо настроить размер шрифта, чтобы он соответствовал.

$('.container').each(function() { 
 
    fitText($(this).find(':submit').get(0)); 
 
}); 
 

 
function fitText(elem) { 
 
    var $button = $(elem), 
 
     size = 1; // your preferred initial size 
 
    console.log($button.attr('type')); 
 
    for (;size < 150; size++) { 
 
     $button.css('font-size', size + 'px'); 
 
     var currentLH = parseInt($button.css('font-size'), 10); 
 
     if (parseInt($button.height(), 10) >= (currentLH * 2)) { 
 
      size--; 
 
      $button.css('font-size', size + 'px'); 
 
      break; 
 
     } 
 
    } 
 
}

.container { 
 
    border: 1px solid red; 
 
    margin: 0 0 10px; 
 
} 
 
.c1 { width: 150px; } 
 
.c2 { width: 400px; } 
 
.c3 { width: 100%; } 
 
.btn-lg { 
 
    width: 100%; 
 
    word-wrap: break-word; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container c1"> 
 
    <input type="submit" value="GET INSTANT ACCESS!" class="btn btn-lg" /> 
 
</div> 
 
<div class="container c2"> 
 
    <input type="submit" value="GET INSTANT ACCESS!" class="btn btn-lg" /> 
 
</div> 
 
<div class="container c3"> 
 
    <input type="submit" value="GET INSTANT ACCESS!" class="btn btn-lg" /> 
 
</div>