Я использую bootstrap 3, и у меня есть следующий html:
<div class="col-sm-2" >
<a id="new-board-btn" class="btn btn-success" >Create New Board</a>
</div>
На маленьком экране текст "Создать новую панель" слишком длинный, чтобы поместиться на кнопке. Я хотел бы, чтобы текст обернулся на другую строку, а высота кнопки увеличилась, чтобы соответствовать тексту. Любые советы о том, как это сделать?
В Bootstrap класс .btn имеет свойство white-space: nowrap;, что делает его таким, чтобы текст кнопки не обертывался. Таким образом, после установки этого параметра на normal и нажатия кнопки a width текст должен быть перенесен на следующую строку, если текст превысит набор width.
#new-board-btn {
white-space: normal;
}
Я знаю, что у этого уже есть заметный ответ, но я чувствую, что у меня есть улучшение.
Отмеченный ответ немного вводит в заблуждение. Он установил ширину на кнопку, которая не нужна, и заданные ширины не являются "отзывчивыми". К его защите он упоминает в комментарии ниже, что ширина не нужна и просто пример.
Одна вещь, не упомянутая здесь, заключается в том, что слова могут сломаться посреди слова и выглядеть испорченными.
Мое решение, заставляет разрыв произойти между словами, приятным переносом слов.
.btn-responsive {
white-space: normal !important;
word-wrap: break-word;
}
<a href="#" class="btn btn-primary btn-responsive">Click Here</a>
Для любого, кто может быть заинтересован, другой подход использует запросы @media для масштабирования кнопок на разных видовых экранах.
Демо: http://bootply.com/93706
<a href="#"><button type="button" class="btn btn-info btn-block regular-link"> <span class="text">Create New Board</span></button></a>
Мы можем использовать btn-блок для автоматического реагирования.
В некоторых случаях очень полезно изменить размер шрифта с помощью относительных единиц размера шрифта. Например:
.btn {font-size: 3vw;}
Демо: http://www.bootply.com/7VN5OCVhhF
1vw составляет 1% ширины окна просмотра. Дополнительная информация: http://www.sitepoint.com/new-css3-relative-font-size/