Bootstrap 4 的空白属性

Question

我一直在尝试找到与 CSS 属性"white-space: break-spaces"等效的引导程序，但我似乎找不到。

我的问题是，在我屏幕的移动视图中，按钮不在视图中，因为其中的文本很长。

这是我的按钮

<button class="btn btn-primary mt-3" id="send_sms_btn" type="submit">Verify &amp; Submit Withdrawal</button>

应用于元素的 CSS 属性工作正常，但我只能使用引导程序。 有什么建议么？

Answer 1

尝试将.text-break class 添加到按钮

<button class="btn btn-primary mt-3 text-break" id="send_sms_btn" type="submit">Verify &amp; Submit Withdrawal</button>

文本中断参考链接

Answer 2

<style>    
button.overflow {
          white-space: nowrap; 
          width: 100%; 
          overflow: hidden;
          text-overflow: ellipsis; 
          border: 1px solid #000000;
}
</style>

在css文件或head标签中添加此样式。

 <button class="btn btn-primary mt-3 overflow" id="send_sms_btn" type="submit">Verify &amp; Submit too too long long long long long text</button>

在按钮中使用overflow class。 它不会 go 出屏。 我们试试吧。 希望能解决问题。