使用 <br>
标签强制换行
<br>
是 HTML 中专门用于换行的标签,插入后会立即中断当前文本流并换行。
<p>第一行文字<br>第二行文字</p>
利用 <p>
段落标签自动换行
<p>
标签默认会将内容包裹为独立段落,段落之间自动换行并添加垂直间距。
<p>第一段内容</p> <p>第二段内容</p>
通过 <div>
块级元素换行
<div>
作为块级元素,内部内容会独占一行,多个 <div>
会依次垂直排列。
<div>第一块内容</div>
<div>第二块内容</div>
CSS 控制元素显示方式
通过 CSS 将元素设置为 display: block
或 display: flex
等块级显示模式。
<span style="display: block;">第一行</span> <span style="display: block;">第二行</span>
方法 | 适用场景 | 示例效果 |
---|---|---|
<br> |
同一段落内局部换行 | 文字A 文字B |
<p> |
多段文字整体分隔 | 段落1 段落2(带间距) |
<div> |
分区 | 区块1 区块2(无自动间距) |
CSS display | 灵活控制元素布局 | 可设置行高/边距 |
相关问题与解答
Q1:为什么在 <p>
标签内按回车键不会自动换行?
A:HTML 会合并连续的空白字符(包括换行和空格),必须使用 <br>
标签或结束当前 <p>
标签才能实现换行。
<span style="display: inline-block;">横向排列1</span>
<span style="display: inline-block;">横向排列2