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

IT技术 javascript css twitter-bootstrap reactjs responsive-design
2021-04-28 17:44:03

我有一个响应式 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>
3个回答

您有两个选择：

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

查看 Bootstrap 提供的响应式实用程序：

引导程序 3：

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

你可以使用类似的东西：

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

引导程序 4：

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

你可以使用类似的东西：

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

根据您要定位的屏幕尺寸调整断点。

请试试这个，它对我有用

input[type="submit"] {
   white-space: normal;
}

此外，我们必须将 -webkit-appearance 设置为 none 以删除输入的特定样式。

其它你可能感兴趣的问题
上一篇React / Redux：mapStateToProps 实际上并未将状态映射到props 下一篇如何通过在 ReactNative 中点击屏幕来关闭模式