为什么我的React项目中p标签内的空格无法正常渲染？

问题原因 #

父容器.about-div_lastfm设置了display: flex，内部的两个<p>标签属于独立的flex子项，默认子项之间不会自动保留空白字符。你写在第二个<p>标签内部开头的{" "}是第二个元素的内部空白，无法作用在两个元素的间隔位置，所以会出现to和歌名直接连在一起的情况。

解决方案 #

你可以从下面几个方案里选适合你的：

• 方案1：给第一个<p>标签添加右间距，比如给.actualmente-escuchando类新增样式margin-right: 0.25em，用em单位可以跟随字体大小自适应调整间距
• 方案2：在两个<p>标签之间插入空白节点，把原本写在第二个p内部开头的{" "}移到两个p的中间即可，示例代码如下：

<div className="about-div_lastfm fade-in">
  <p className="actualmente-escuchando">Listening now to</p>
  {/* 空白节点加在两个p标签之间 */}
  {" "}
  <p className="artista">
    {songName} <span className="actualmente-escuchando">by</span>{' '}
    <a href={urlPath} target="_blank">{artistName}</a>
    <img
            className="img-nowPlaying"
            src={gif}
            alt="Ahora sonando, do do do..."
          />
  </p>
</div>

• 方案3：调整HTML结构，将“Listening now to”和后面的歌曲相关内容放在同一个<p>标签内，不需要拆成两个独立的p标签，天然就会保留文本之间的空格。

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