React模态框文本无法保留空格与换行 疑似p标签导致的问题问询

问题根源 #

浏览器默认会合并HTML元素内的连续空白字符（空格、换行符、制表符等）为单个空格，你使用的<p>标签默认的white-space属性值为normal，会触发这个默认行为，最终导致原始文本格式丢失。

修复方案 #

方案1：给现有p标签添加white-space样式（最便捷） #

直接给包裹文本的p标签添加white-space: pre-wrap样式即可，该属性会保留原始的所有空白格式，同时当文本长度超出容器宽度时会自动折行，不会撑破模态框容器。
修改后的代码示例：

<DialogContent>
  <Grid
    style={{ marginTop: "8px" }}
    container
    spacing={0}
  ></Grid>
  <p style={{ whiteSpace: 'pre-wrap' }}>
    {this.state.eulaEncText ? this.state.eulaEncText : null}
  </p>
</DialogContent>

方案2：替换p标签为pre标签 #

pre标签默认会保留空白格式，同样建议加上white-space: pre-wrap避免长文本溢出，还可以重置默认外边距对齐原有p标签的视觉效果：
修改后的代码示例：

<DialogContent>
  <Grid
    style={{ marginTop: "8px" }}
    container
    spacing={0}
  ></Grid>
  <pre style={{ whiteSpace: 'pre-wrap', margin: 0 }}>
    {this.state.eulaEncText ? this.state.eulaEncText : null}
  </pre>
</DialogContent>

属性说明 #

你可以根据实际需求选择不同的white-space属性值：

• pre：完全保留所有空白格式，仅在遇到原始换行符时换行，文本过长会溢出容器
• pre-wrap：保留所有空白格式，原始换行符生效，同时文本超出容器宽度时自动折行，适配绝大多数展示场景
• pre-line：合并连续空格为单个空格，保留原始换行效果，适合不需要保留缩进仅需要保留换行的场景

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