Bootstrap/HTML：修改段落指定文字颜色且避免换行问题

核心问题分析 #

你当前的代码存在两个关键问题：

1. 无效的HTML嵌套（<p>标签嵌套<p>/<div>），导致块级元素自动换行，破坏文本连贯性
2. 错误使用块级元素包裹需要连贯显示的文本，窄屏时自然会被拆分

优化方案 #

利用内联元素+CSS换行控制来解决，结合你使用的Bootstrap工具类，直接修改代码如下：

方案1：整行文本强制不换行

如果希望整段文本始终保持一行（窄屏时会横向滚动）：

<li className="border rounded mt-3 text-white">
  <div className="w-100 h-100">
    <p className="d-flex align-items-center justify-content-center gap-2 text-nowrap">
      <span className="text-info">User123</span>
      <span>Lorem ipsum.</span>
      <span className="text-info">3lorem1</span>
      <span className="text-info">User123</span>
      <span>on</span>
      <span>12-12-2023</span>
    </p>
  </div>
</li>

方案2：特定文本组不拆分（允许整段换行）

如果允许整段换行，但希望User123 on 12-12-2023这类关联文本不被拆分：

<li className="border rounded mt-3 text-white">
  <div className="w-100 h-100">
    <p className="text-center">
      <span className="text-info">User123</span>
      <span>Lorem ipsum.</span>
      <span className="text-info">3lorem1</span>
      {/* 用inline-block包裹需要连贯的文本组 */}
      <span className="d-inline-block text-nowrap">
        <span className="text-info">User123</span> on <span>12-12-2023</span>
      </span>
    </p>
  </div>
</li>

关键改进点 #

• 替换所有用于包裹文本的块级元素（<p>/<div>）为内联元素<span>，避免自动换行
• 使用Bootstrap内置类text-nowrap（对应CSSwhite-space: nowrap;）强制文本块不拆分
• 用d-flex align-items-center和gap-2优化文本垂直对齐与间距，提升可读性
• 移除无效的HTML嵌套结构，修复布局异常根源

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