如何在Bootstrap中内联多个<p>元素及解决文本与空格问题

问题1：内联p元素的换行与溢出处理 #

当前d-inline-flex容器+text-nowrap的组合会导致内容溢出；而text-wrap仅会让单个p内部文字换行，而非整个p块跳转新行。调整方案：

• 把容器的d-inline-flex替换为d-flex flex-wrap，让容器支持自动换行，避免横向溢出
• 给每个<p>用d-inline-block替代text-nowrap，让每个p作为独立行内块，容器宽度不足时整个p块会跳到新行开头
• 若需要p内部文字在块内自动换行（避免块内溢出），额外添加text-wrap类

React代码示例：

<div className="container d-flex flex-wrap">
    <p className="d-inline-block text-wrap">
        This is sentence number 1.
    </p>
    <p className="d-inline-block text-wrap">
        This is sentence number 2, which is a bit longer. 
    </p>
    <p className="d-inline-block text-wrap">
        This is sentence number 3 and is the longest sentence by far. 
    </p>
</div>

问题2：保留多个空格的处理 #

HTML默认合并连续空格，两种解决方式：

方式1：使用HTML不换行空格实体 #

用 代替普通空格，每个实体对应一个独立空格：

<p className="d-inline-block text-wrap">
    This is sentence number 1. &nbsp;&nbsp;&nbsp; 这里有三个空格
</p>

方式2：使用Bootstrap的text-pre-wrap类 #

添加text-pre-wrap类，对应CSS的white-space: pre-wrap，保留原始空格的同时允许文本自动换行：

<p className="d-inline-block text-wrap text-pre-wrap">
    This is sentence number 1.   这里有三个空格
</p>

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