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

Posted 2023-02-22

【中文标题】使用小屏幕时，在按钮文本内强制换行

【英文标题】：Force a line break inside the button's text when using small screens

【发布时间】：2018-11-18 21:41:00

【问题描述】：

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

【问题讨论】：

我们需要你的父元素的代码。

@HorsSujet 我已经用它所属的 div 更新了 OP。

【参考方案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 在大多数设备上等于 480 像素。您应该始终在em 中定义媒体查询。转换很简单：将像素数除以 16。这将使您的网站能够正确呈现给已调整默认浏览器字体大小以便于阅读的用户。

【讨论】：

1 号是我的解决方案。谢谢！

【参考方案2】：

查看 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">

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

【参考方案3】：

请试试这个，它对我有用

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

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