防止文本在 Bootstrap 3 响应式设计中换行

Posted 2023-03-06

【中文标题】防止文本在 Bootstrap 3 响应式设计中换行

【英文标题】：Keep Text From Wrapping in Bootstrap 3 Responsive Design

【发布时间】：2015-03-15 04:50:02

【问题描述】：

我有一个查看器，其控制栏由连续的 div 组成。其他项目的文本上方已经有 FA 图标，因此屏幕大小没有问题，但为了区分两个具有更高级别控制的按钮来切换查看器中的内容。它们的布局如下所示：

<i class="fa fa-toggle-right lg"></i> <span style="font-size:18px;">Next

当它显示在像 iPhone 这样的小屏幕上时，图标会在文本上移动，我希望它保持在它旁边。原因是另一个按钮然后与它下面的图标对齐，这看起来很糟糕。

Previous<i class="fa fa-toggle-left lg"></i>

关于如何防止它们包裹的任何选项？

【问题讨论】：

我的一个想法是在其中包含一个不可见的字符，浏览器会将其作为单词的一部分读取。因此，例如，使用 ^ 作为伪装符号，它将是：^Next跨度>

【参考方案1】：

用<span class="text-nowrap"> 包围它。 .text-nowrap 类是 Bootstrap's text alignment 辅助类之一，包括：

.text-nowrap 
    white-space: nowrap;

这使得图标和文本保持在同一行。

【讨论】：

我自己也没有注意到引导类。我将它添加到我的 html 表的类标签中，因为我希望所有单元格不再包装到第二行。

它不会换行，但也会截断文本。我正在寻找一种方法来容纳 div 中的文本而无需换行。