javascript - 使用小屏幕时强制在按钮文本内换行

Question

我有一个响应式网络应用程序，其中包含一些对于小手机屏幕来说太大的按钮。他们有太多的文字，所以他们最终离开了屏幕。我目前正在使用 a通过给他们 Bootstrap 类来标记为按钮。所以代码目前看起来像这样:

<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/> )，但只在小屏幕上。我怎么能那样做？

编辑:这是代码的完整 View :

<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>

Answer 1

你有两个选择:

1) Bootstrap 对其按钮使用 white-space: nowrap，但您可以为较小的屏幕覆盖它:

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

2) 如果你想更好地控制换行，你可以在你想要的行周围添加 span，然后在较小的屏幕上设置 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 }
}

Note: 30em is equal to 480px on most devices. You should always define media queries in em. The conversion is easy: divide your pixel number by 16. This will allow your site to render correctly for users who have adjusted their default browser font size for easier reading.