跨浏览器兼容的文本域换行符

Question

我已经尝试过使用以下的\r和\n组合，但没有成功：

<textarea rows="10" readonly><?php echo 'First line.\r\nSecond line.'; ?></textarea>

通过连续组合使用 
 和 
，我能够在各种浏览器中实现我的目标，但当使用w3验证器进行验证时，出现了以下HTML5验证错误：

错误：数字字符引用扩展为回车符。

另一方面，在 <textarea> 中使用常规换行并应用以下CSS规则，我没有收到任何验证错误；但这种方法的挑战在于它不是跨浏览器兼容的（特别是不被Internet Explorer和Edge支持）。

textarea {
    white-space: pre-line;
}

以下是我的 <textarea> 元素的内容：

<!-- First approach, as described above. -->
<textarea rows="10" readonly><?php echo 'First line.&#13;&#10;Second line.'; ?></textarea>

<!-- Here, the second one, in combination with the white-space: pre-line; CSS rule. -->
<textarea rows="10" readonly><?php echo 'First line.
Second line.'; ?></textarea>

如何在HTML的元素中成功实现有效且跨浏览器兼容的换行？

- nyedidikeke

---

您无需对其进行 HTML 编码 <?= "第一行。\r\n第二行。"; ?>。 - CD001

这并不实际可行，@CD001；这是我最初的尝试（失败了），然后我才转而使用我在上面帖子中提到的选项。 - nyedidikeke

如果您在 PHP 的 echo 中使用 " 而不是 '，它会有所不同... 它们是不同的东西：http://php.net/manual/en/language.types.string.php - CD001

Answer 1

根据规范，HTML5文本区域使用LF字符作为换行符(\n)，但它们也“理解”并内部转换\r和\r\n。

当textarea可变时，其原始值应该可以被用户编辑：用户代理应该允许用户编辑、插入和删除文本，并以“LF”（U+000A）字符的形式插入和删除换行符。

出于历史原因，元素的值有三种不同的方式进行规范化以用于三种不同的目的。原始值是最初设置的值。它没有被规范化。API值是在value IDL属性中使用的值。它已规范化，使得换行符使用“LF”（U+000A）字符。最后，还有表单提交值。它已规范化，使得换行符使用U+000D CARRIAGE RETURN U+000A LINE FEED（CRLF）字符对，并且如果给定元素的wrap属性，则会插入额外的换行符以将文本包裹在给定的宽度处。

如果浏览器不支持它，则不符合HTML5标准。

---

从PHP来看，这应该能解决问题：

<textarea rows="10" readonly><?php echo 'First line.'.PHP_EOL.'Second line.'; ?></textarea>

尝试一下!

---

关于引号

上面的例子总是有效的，因为它使用了连接符。如果您不介意引号的类型，请记住双引号解析变量和特殊字符，而单引号则不会。

考虑以下示例：

<textarea id="text-area-A" rows="10" readonly><?php echo 'First line. \n Second line.'; ?></textarea>

<textarea id="text-area-B" rows="10" readonly><?php echo "First line. \n Second line."; ?></textarea>

#text-area-A会打印出字符\和n，而#text-area-B会将其“翻译”为换行符。

有关引号的更多信息，请参见：PHP中单引号字符串和双引号字符串的区别是什么？

- xDaizu

---

使用\n，例如：<textarea rows="10" readonly><?php echo 'First line.\nSecond line.'; ?></textarea>是无效的！\n会被打印为文本在<textarea>元素中；这不是预期的结果，正如我在上面的帖子中所指出的。 - nyedidikeke

@nyedidikeke - 你的问题在于你使用的引号 - 不论是我最初评论中的代码 - 还是这个带有串联字符串的代码 都会 生效。 - CD001

Answer 2

按照@CD001的建议，使用双引号 (") 而不是单引号 (') 使其正常工作。

以下是解决方案，生成有效的HTML并且跨浏览器兼容:

<textarea rows="10" readonly><?php echo "First line.\r\nSecond line."; ?></textarea>

值得注意的是，在使用单引号时，将PHP内置的预定义常量PHP_EOL连接在两个要输出的行之间同样有效，这与上面介绍的方式一样好用。

以下是使用PHP_EOL实现相同目的的代码片段：

<textarea rows="10" readonly><?php echo 'First line.' . PHP_EOL .'Second line.'; ?></textarea>

- nyedidikeke