如何防止<p>标签末尾的图标单独换行？

针对你遇到的时钟图标单独换行的问题，可通过以下几种方式解决：

方法1：拆分日期与时间输出，用容器绑定 #

如果formatDate方法支持返回拆分后的日期和时间（比如新增返回纯时间的格式），将时间和图标包裹在同一个容器中，设置white-space: nowrap强制二者同换行：

<span>{{ formatDate(show.dateExport, 'short') }}</span>
<span v-if="show.timeStart" style="white-space: nowrap;">
  {{ formatDate(show.dateExport, 'time-only') }} <!-- 假设该格式返回纯时间文本 -->
  <i class="bi-clock-fill" />
</span>

方法2：用CSS伪元素替代独立图标 #

如果无法拆分日期时间输出，可将时钟图标改为CSS伪元素，绑定在时间文本后方，让图标与时间成为一个整体：

1. 修改Vue模板，给日期文本添加类名：

<span class="date-text" :class="{ 'has-clock': show.timeStart }">
  {{
    formatDate(
      show.dateExport,
      show.timeStart ? "long" : "short"
    )
  }}
</span>

2. 添加CSS样式（以Bootstrap Icons为例）：

.date-text.has-clock::after {
  content: '\f2f6'; /* bi-clock-fill的字体编码 */
  font-family: "Bootstrap Icons";
  margin-left: 0.25em;
  vertical-align: middle;
}

方法3：用inline-flex容器强制对齐 #

若能调整DOM结构，将时间与图标放入inline-flex容器，也可实现同步换行：

<!-- 假设formatDate可拆分日期和时间 -->
{{ formatDate(show.dateExport, 'short') }}
<span v-if="show.timeStart" style="display: inline-flex; align-items: center; gap: 0.25em;">
  {{ formatDate(show.dateExport, 'time-only') }}
  <i class="bi-clock-fill" />
</span>

问题背景 #

问题现象 #

在部分手机屏幕上，时钟图标会出现单独换行的情况：

期望效果 #

图标应与时间值一同换行：

现有Vue 3代码 #

{{
  formatDate(
    show.dateExport,
    show.timeStart ? "long" : "short"
  )
}}
<span v-if="show.timeStart">
  <i class="bi-clock-fill" />
</span>

注：当前实现难以仅将时间和图标包裹而不包含日期其余部分。

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