如何防止Bootstrap按钮文本换行显示？

要让带空格的按钮文本保持一行显示，有两种简单可行的方法：

方法1：使用Bootstrap内置的text-nowrap类 #

Bootstrap提供了专门用于防止文本换行的工具类text-nowrap，直接将它添加到按钮元素上即可：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-primary text-nowrap" type="submit">T est</button>
    </form>
  </div>
</nav>

方法2：自定义CSS强制不换行 #

如果不想用内置类，也可以直接给按钮添加样式，设置white-space: nowrap来阻止换行：

内联样式写法： #

<button class="btn btn-primary" type="submit" style="white-space: nowrap;">T est</button>

自定义类写法： #

先定义CSS规则：

.btn-no-wrap {
  white-space: nowrap;
}

再给按钮添加这个类：

<button class="btn btn-primary btn-no-wrap" type="submit">T est</button>

原理说明：默认情况下，元素在可用空间不足时会在空格位置触发换行，white-space: nowrap属性会强制文本始终在同一行显示，直到遇到<br>标签为止。

内容的提问来源于stack exchange，提问作者cooooool