HTML 如何在HTML文本区域添加换行

在本文中，我们将介绍如何在HTML文本区域添加换行。HTML文本区域是一种可以让用户输入多行文本的表单元素，通常用于评论框、留言框等需要用户输入较长文本的地方。

阅读更多：HTML 教程

使用
标签

在HTML中，我们可以使用
标签来实现换行效果。该标签是一个自闭合标签，可以用于在文本中插入一个换行。例如：

<textarea>
    第一行文本<br>
    第二行文本
</textarea>

上述代码中，使用
标签在文本中添加了一个换行。在浏览器中渲染时，文本区域将显示为两行，第一行是”第一行文本”，第二行是”第二行文本”。

使用转义字符

除了使用
标签外，我们还可以使用转义字符来实现换行效果。在HTML中，使用”\n”来表示换行。例如：

<textarea>
    第一行文本\n第二行文本
</textarea>

上述代码中，使用”\n”来表示换行。在浏览器中渲染时，文本区域将显示为两行，第一行是”第一行文本”，第二行是”第二行文本”。

使用CSS样式

除了使用标签和转义字符外，我们还可以使用CSS样式来控制HTML文本区域的换行。通过设置CSS的”white-space”属性为”pre”或”pre-wrap”，可以保留文本中的换行符。例如：

<style>
    .textarea {
        white-space: pre;
    }
</style>

<textarea class="textarea">
    第一行文本
    第二行文本
</textarea>

上述代码中，通过设置CSS样式为”white-space: pre;”，文本区域将保留文本中的换行符。在浏览器中渲染时，文本区域将显示为两行，第一行是”第一行文本”，第二行是”第二行文本”。

JavaScript实现

如果需要动态添加换行，我们可以使用JavaScript来实现。通过在文本中插入”\r\n”来表示换行，例如：

<script>
    function addLineBreak() {
        var textarea = document.getElementById("myTextarea");
        textarea.value += "第一行文本\r\n第二行文本";
    }
</script>

<textarea id="myTextarea"></textarea>

<button onclick="addLineBreak()">添加换行</button>

上述代码中，使用JavaScript的”value”属性来获取和设置文本区域的内容。在”addLineBreak”函数中，通过字符串拼接以”\r\n”作为换行符添加到文本区域中。点击”添加换行”按钮，文本区域将添加换行后的内容。