如何在<p>标签中实现换行？按回车键换行不生效如何解决

问题原因 #

HTML默认会把元素内的连续空白字符（包括换行、空格、制表符）合并为单个空格显示，所以你在<p>标签内直接敲回车换行，渲染时会被忽略，不会显示为换行效果。

实现<p>标签内换行的几种方案 #

• 方案1：使用<br>换行标签
  在需要换行的位置插入<br>标签即可强制换行，代码示例：

  <p>
  test<br>
  test
  </p>
  

• 方案2：使用CSS的white-space属性控制空白规则
  给<p>标签添加white-space: pre-line属性，就可以保留代码里的换行符，同时自动合并多余空格，适合需要保留手动换行的场景，代码示例：

  <!-- 内联样式写法 -->
  <p style="white-space: pre-line;">
  test
  
  test
  </p>
  

  其他可选的white-space属性值：
  • pre：保留所有空白、换行，不会自动折行
  • pre-wrap：保留所有空白、换行，超出容器宽度时会自动折行
• 方案3：分段使用多个<p>标签
  如果两段内容属于独立段落，直接拆分为两个<p>标签是语义化更高的写法，本身<p>标签就自带上下外边距的段落间距，显示效果更符合段落的阅读习惯：

  <p>test</p>
  <p>test</p>
  

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