使用小屏幕时，在按钮的文本内强制换行 [英] Force a line break inside the button's text when using small screens

问题描述

我有一个响应式Web应用程序，其中包含一些按钮，这些按钮对于较小的移动屏幕来说太大了。它们中的文本过多，因此最终无法显示在屏幕上。
我当前通过给他们引导类来使用 a 标记作为按钮。因此，当前代码如下所示：

I have a responsive web app that contains some buttons which are too large for small mobile screens. They have too much text in them so they end up going off the screen. I am currently using the a tag as a button by given them bootstrap classes. So the code currently looks like this:

<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 /> ）的原因，而是仅在小屏幕上显示。我该怎么办？

I would like add a line break to the text, so that way it won't go off the screen (which is why I don't simply add a <br/>), but only on the small screens. How could I do that?

编辑：这是代码的完整视图：

Here is a fuller view of the code:

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

推荐答案

您有两个选择：

1）Bootstrap使用空格：nowrap 作为按钮，但是对于较小的屏幕，您可以覆盖它：

1) Bootstrap uses white-space: nowrap for its buttons, but you can override that for smaller screens:

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

2）如果您想更好地控制换行，可以在所需的行周围添加跨度，然后在较小的屏幕上设置 display：block ：

2) If you want more control over the wrapping, you can add spans around the lines you want, and then set display: block on smaller screens:

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

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.

这篇关于使用小屏幕时，在按钮的文本内强制换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！