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

Question

我有一个响应式 Web 应用程序，其中包含一些对于小移动屏幕来说太大的按钮。他们有太多的文字，所以他们最终离开了屏幕。我目前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>

Answer 1

您有两个选择：

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。这将使您的网站能够为调整了默认浏览器字体大小以方便阅读的用户正确呈现。