解决Header内Span换行问题：FAQ区域Glyphicon不单独换行

我之前也跟你一样在FAQ区域踩过这个Glyphicon换行的坑！试了好几种方法都没搞定，后来终于找到几个靠谱的方案，既能避免图标单独换行，又能保留CSS动效：

方案1：用inline-flex包裹标题与图标（最稳妥） #

这个方法能确保文字和图标始终在同一行（或最后一行末尾），同时完全支持给图标加动效。

HTML结构 #

<h3 class="faq-title">
  你的FAQ问题内容
  <span class="glyphicon glyphicon-chevron-down"></span>
</h3>

CSS代码 #

.faq-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* 调整文字和图标的间距，按需修改 */
  width: 100%; /* 让标题占满容器宽度，文字正常换行 */
}

/* 给图标添加动效示例（比如hover旋转） */
.faq-title .glyphicon {
  transition: transform 0.3s ease;
}

.faq-title:hover .glyphicon {
  transform: rotate(180deg);
}

原理：inline-flex会让容器内部的元素保持在同一行流中，即使标题文字换行，图标也会紧跟最后一行的末尾，不会单独掉下去。加上width:100%能让标题正常占满容器宽度，文字自然换行。

方案2：给图标设置inline-block（轻量方案） #

如果不想用flex布局，这个方法也能解决问题，核心是让图标成为内联流的一部分。

CSS代码 #

.faq-title {
  /* 保持文字正常换行的默认行为 */
  white-space: normal;
}

.faq-title .glyphicon {
  display: inline-block;
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}

.faq-title:hover .glyphicon {
  transform: scale(1.2);
}

原理：默认情况下Glyphicon的span是inline元素，可能因为排版规则被挤到下一行；设置为inline-block后，它会和相邻的文字保持在同一行流中，不会单独换行。

方案3：修复伪元素的动效问题（如果你想回到伪元素方案） #

你提到用::after伪元素能避免换行但没法加动效，其实是伪元素的默认display:inline导致的——inline元素的transform动效可能无法正常触发，只需修改display属性即可：

CSS代码 #

.faq-title::after {
  content: "\e114"; /* 替换为你需要的Glyphicon Unicode */
  font-family: 'Glyphicons Halflings';
  margin-left: 0.5rem;
  display: inline-block; /* 关键：让伪元素支持transform动效 */
  transition: transform 0.3s ease;
}

.faq-title:hover::after {
  transform: rotate(90deg);
}

原理：给伪元素设置inline-block后，它就可以正常响应CSS动效了，同时依然保持和标题文字在同一行的特性。

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