如何阻止Bootstrap row容器内标签换行并隐藏移动端超出内容

我明白你的需求啦——当容器宽度不够时，只显示能放在一行的标签，把换行的那些直接藏起来。咱们可以通过CSS Flexbox结合溢出隐藏的技巧来实现，下面是具体的修改方案：

步骤1：调整HTML结构 #

首先，我们需要把所有标签包裹在一个统一的容器里，同时让「Tags:」文本和标签容器在同一行排列，避免布局混乱。替换原来的标签部分代码：

<!-- 替换原来的标签row -->
<div class="tags-wrapper" style="padding-top: 1px;">
  <p style="font-family: 'Open Sans'; font-size: 1rem; margin: 0;">Tags:</p>
  <div class="tag-container">
    <div class="tag">
      <p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;" onclick="tag('deep-learning')">
        &nbsp;&nbsp;<span>#deep-learning</span></p>
    </div>
    <div class="tag">
      <p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;" onclick="tag('data')">
        &nbsp;&nbsp;<span>#data</span></p>
    </div>
    <div class="tag">
      <p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;" onclick="tag('pytorch')">
        &nbsp;&nbsp;<span>#pytorch</span></p>
    </div>
    <div class="tag">
      <p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;" onclick="tag('tensorflow')">
        &nbsp;&nbsp;<span>#tensorflow</span></p>
    </div>
  </div>
</div>

步骤2：添加对应的CSS样式 #

在你的CSS代码中加入以下样式，控制标签的排列和溢出行为：

/* 标签整体容器，让文本和标签行对齐 */
.tags-wrapper {
  display: flex;
  align-items: center;
  gap: 10px; /* 调整「Tags:」和标签之间的间距 */
}

/* 标签列表容器，强制不换行 + 隐藏超出部分 */
.tag-container {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* 单个标签样式，禁止压缩 + 设置间距 */
.tag {
  flex-shrink: 0; /* 避免标签被压缩变形 */
  margin-right: 10px; /* 标签之间的间距 */
}

/* 移除标签内p标签的默认margin，消除多余空白 */
.tag p {
  margin: 0;
}

效果说明 #

这样修改后：

• 在桌面端宽度足够时，所有标签会正常显示在同一行
• 在移动端宽度不足时，.tag-container会强制标签保持一行，超出容器宽度的部分会被直接隐藏，不会出现换行的情况
• 每个标签的宽度不会被压缩，保证文字完整显示

你可以根据自己的需求调整gap和margin-right的值，让标签间距更符合你的设计风格。

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