Принудительный разрыв строки внутри текста кнопки при использовании маленьких экранов - PullRequest
Новая
       16

Принудительный разрыв строки внутри текста кнопки при использовании маленьких экранов

0 голосов
/ 08 июня 2018

У меня есть адаптивное веб-приложение, содержащее несколько кнопок, которые слишком велики для маленьких мобильных экранов.В них слишком много текста, поэтому они уходят с экрана.В настоящее время я использую тег a в качестве кнопки, предоставив им классы начальной загрузки.Итак, код в настоящее время выглядит следующим образом: 

<a className='btn btn-default'>Here I have a button with long text in it, which causes some text to go off screen when in small mobile devices.</a>

Я хотел бы добавить разрыв текста к тексту, чтобы он не исчезал с экрана (поэтому я просто не добавляю<br/>), но только на маленьких экранах.Как я мог это сделать?

Редактировать: Вот более полный вид кода: 

<div className='row'>
  <div className='col-sm-12'>
    <p>Some text which is irrelevant to the problem.</p>
    <a className='btn btn-default'>Here I have a button with long text in it, which causes some text to go off screen when in small mobile devices.</a>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 08 июня 2018

У вас есть два варианта:

1) Bootstrap использует white-space: nowrap для своих кнопок, но вы можете изменить это для небольших экранов: 

@media only screen and (max-width: 30em) {
  body .btn { white-space: normal }
}

2) Если вы хотите больше контроляповерх переноса вы можете добавить интервалы вокруг нужных линий, а затем установить display: block на экранах меньшего размера: 

<a className='btn btn-default'>
  <span>This will be line 1</span>
  <span> followed by line 2</span>
</a>

@media only screen and (max-width: 30em) {
  .btn span { display: block }
}

Примечание: 30em равно 480px на большинстве устройств.Вы всегда должны определять медиазапросы в em.Преобразование легко: разделите число пикселей на 16. Это позволит вашему сайту правильно отображаться для пользователей, которые настроили размер шрифта браузера по умолчанию для удобства чтения.

0 голосов
/ 08 июня 2018

Проверьте отзывчивые утилиты, которые предлагает Bootstrap:

Bootstrap 3:

https://getbootstrap.com/docs/3.3/css/#responsive-utilities

Вы можете использовать что-то вроде:

<br class="hidden-md hidden-lg">

Bootstrap 4:

https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements

Вы можете использовать что-то вроде:

<br class="d-md-none">

Настройте точку останова в зависимости от того, какие размеры экрана вы хотите настроить.

...