Bootstrap 3.3 кнопка css разрыв текста на мобильном телефоне

Question

У меня проблема с кнопкой, где текст разбивается на меньшее разрешение.Я хочу, чтобы он был адаптивным, чтобы он оставался неизменным при любом разрешении, и я использую Bootstrap 3.3

<button ng-show="vm.account.state === 'paused'" class="bm-badge bm-badge-danger "  ng-click="vm.corrigir()">
            <i class="fa fa-play"></i> Iniciar
        </button>

Как это должно выглядеть (снимок экрана с более высоким разрешением):

При 370px он ломается и выглядит так:

Answer 1

Вот одна идея для вас: https://codepen.io/panchroma/pen/xBZwbr

Важным моментом является то, что вы хотите, чтобы текст вашей кнопки реагировал на окно просмотра, и один из способов сделать это - использовать модуль vw(ширина области просмотра), например font-size:calc(10px + 1vw);

• увеличение или уменьшение 10px будет контролировать размер шрифта на самых маленьких экранах
• увеличение или уменьшение 1vw будет контролировать, как размер шрифта реагирует на область просмотраширина

Надеюсь, это поможет!

---

HTML

<button  class="btn btn-danger ">
 <i class="fa fa-play"></i> Iniciar
</button>  

CSS

.btn{
  font-size:calc(10px + 1vw); /* the important bit */
  padding:10px 20px;
  border-radius:calc(10px + 2vw);
  box-shadow: 2px 3px 3px rgba( 0, 0, 0, 0.5 )
}


/* Optional: if space is tight, hide play icon at small viewport */

.fa.fa-play{
  display:none;
}

@media (min-width: 350px) {
  .fa.fa-play{
    display:inline;
  }
}