文本区域“wrap=hard”不适用于 Firefox答案

【问题标题】：Textarea "wrap=hard" not working for Firefox文本区域“wrap=hard”不适用于 Firefox
【发布时间】：2011-07-18 07:45:02
【问题描述】：

我有以下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org 
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="RLJ RLJ" />

    <title>Untitled 2</title>
</head>

<body>
    <form action=SCRIPT.php method=POST>
        <textarea name="pastwork" id="pastwork" rows="6" wrap="hard" style="border: 1px solid  
#808080; width:85px; padding: 5px;"></textarea>
        <input type="submit" value = "Submit"/>
    </form>
</body>
</html>

其中SCRIPT.php如下：

<?php
$pastwork = $_POST['pastwork'];

echo "<pre>". $pastwork."</pre>";
echo "<br />";
echo nl2br($pastwork);

?>

我遇到的问题是 Firefox 中没有正确传递换行符。当我在 textarea 中输入以下内容时（B 表示导致光标跳到下一行的字符，N 表示导致该单词跳到下一行的字符）：

dddddddddddBdd fff
ggg ggg ggNgg sss

即文本区域如下所示：

+------------+
| dddddddddd |
| Bdd fff    |
| ggg ggg    |
| ggNgg sss  |
+------------+

Internet Explorer 将其回应为：

ddddddddd
bdd fff
ggg ggg
ggNgg sss

这是正确的，换行符正是它们在文本区域中的位置。

但是，Firefox 将其回应为：

ddddddddddN fff
ggg ggg ggNgg sss

我是使用nl2br()还是pre标签。

（我还没试过其他浏览器）

有人可以告诉我为什么会这样，以及如何确保正确传递换行符，而不管浏览器如何。

【问题讨论】：

标签： php html textarea word-wrap

【解决方案1】：

发件人：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

换行指示控件如何换行文本。可能的值是：

hard：浏览器自动插入换行符（CR+LF），使每行不超过控件的宽度；还必须指定 cols 属性才能使其生效。

soft：浏览器确保值中的所有换行符都由 CR+LF 对组成，但不会插入任何额外的换行符。

要保留（自动创建的）换行符而不添加更多内容，请使用 wrap="hard" 发布并将内容读入 wrap="soft"

【讨论】：

【解决方案2】：

我发现如果我将 cols 设置为一个非常高的值，它会起作用。

就像cols=200 一样，因为它实际上比它少，所以它会正确地换行。

我正在用 jquery 创建我的 textarea，所以它看起来像这样......

var textArea = $("<textarea/>", {
                        'name': 'marko',
                        'class': 'form-control',
                        'id': 'new-text-box',
                        'placeholder': 'Type your message...',
                        'autofocus': true,
                        'cols': 200,
                        'rows': 4
                    });

【讨论】：

【解决方案3】：

你为什么不试试

echo '<pre>';
echo "$pastwork";
echo '</pre>';`

？我知道它是一样的，但它可能是值得的麻烦。

【讨论】：

【解决方案4】：

似乎 Mozilla Firefox 使用 cols 属性来中断文本，而不是文本区域的显示宽度。在 XHTML 中，cols 和 rows 属性是必需的。您应该尝试确定cols 属性的值应该是什么，但这很难做到，因为'col' 的宽度取决于使用的字体。您可以使用 JavaScript 来确定字体长度。

在How to get the actual rendered font when it's not defined in CSS? 上询问如何做到这一点。

function getStyle(element, property) {
    return window.getComputedStyle(element, null).getPropertyValue(property);
}

您可以获取元素的字体（即使它不是通过 CSS 定义的！）并计算该元素内文本的宽度。因此，您可以获得在单行上绘制的最大文本长度。然后您必须使用 JavaScript 手动设置 cols 属性：textarea.setAttribute("cols", numberofcols)。列宽是某种字体的平均字符宽度。

【讨论】：

【解决方案5】：

在 Firefox（至少从 3.6+ 开始）中，为了保留自动换行符，您必须执行以下操作...

当然，设置wrap=hard
不要使用cols 和rows 属性
必须指定 CSS 宽度和高度
根本不指定 CSS 溢出（让 Firefox 确定）

测试了这个确切的场景，它似乎在正确的位置换行。

【讨论】：

XHTML 中需要 cols 和 rows 属性。