contenteditable 属性: 新行和 CSS 布局

什么是 contenteditable?

contenteditable 是 HTML5 的一个属性，用于指定一个元素是否可被编辑。设置 contenteditable="true" 后，用户就可以修改该元素内的文本、插入图片等，就像在一个富文本编辑器中一样。

例子

以下是一个含有 contenteditable 属性的 <div> 元素：

<div contenteditable="true">
  这是可编辑的文本。
</div>

在页面中，该 <div> 应该呈现为一段可编辑文本区域。

contenteditable 和换行符

默认情况下，如果用户在一个 contenteditable 元素中按下 Enter 键，会在当前光标位置插入一个新的 <br> 元素。换句话说，按 Enter 键的效果类似于在输入框中输入一个换行。

例子

以下是一个含有 contenteditable 属性的 <div> 元素：

<div contenteditable="true">
  这是一行文本。<br>
  这是另一行文本。
</div>

在页面中，该 <div> 应该呈现为两行文本。

使用 CSS 控制 contenteditable 元素中的换行

由于 contenteditable 元素中的换行符实际上是 <br> 元素，因此可以使用 CSS 来控制这些元素的样式。例如，可以将 <br> 元素的行高设为 1.5 倍文本行高，使其看起来更美观。

例子

以下 CSS 样式可以将 contenteditable 元素中的 <br> 元素的行高设为 1.5 倍文本行高：

[contenteditable="true"] br {
  line-height: 1.5;
}

该样式会选择所有含有 contenteditable="true" 属性的元素内的 <br> 元素，并将其行高设为 1.5 倍文本行高。

使用 Markdown 格式说明

contenteditable 属性: 新行和 CSS 布局

contenteditable 是 HTML5 的一个属性，用于指定一个元素是否可被编辑。当设置 contenteditable="true" 后，用户就可以修改该元素内的文本、插入图片等，就像在一个富文本编辑器中一样。

contenteditable 和换行符

默认情况下，如果用户在一个 contenteditable 元素中按下 Enter 键，会在当前光标位置插入一个新的 <br> 元素。换句话说，按 Enter 键的效果类似于在输入框中输入一个换行。

使用 CSS 控制 contenteditable 元素中的换行

由于 contenteditable 元素中的换行符实际上是 <br> 元素，因此可以使用 CSS 来控制这些元素的样式。例如，可以将 <br> 元素的行高设为 1.5 倍文本行高，使其看起来更美观。