如何将换行符添加到带有多行文本的文本区域答案

【问题标题】：How to add line-breaks to a textarea with text over more lines如何将换行符添加到带有多行文本的文本区域
【发布时间】：2014-07-11 17:32:45
【问题描述】：

我正在使用一个宽度约为 300 像素的文本区域，其中包含 2 行和一个最大长度。

如果文本是两行长，我不会在 $_POST var 中收到任何换行符（<br/> 或 \n）。

textarea $_POST 的 PHP var_dump 输出：

string(35) "test test test test test test test "

HTML：

<textarea name="text-1" id="text-1" rows="2" maxlength="35">Click here to enter text</textarea>

CSS：

#text-1, #text-2 {
    background: none;
    border: none;
    width: 100%;
    max-width: 228px;
    height: 100%;
    word-wrap: break-word;
    text-align: center;
    resize: none;
    font: bold 21px 'Impact', sans-serif;
    color: #fff;
    text-shadow:  2px  2px 2px black,
                  2px -2px 2px black,
                 -2px  2px 2px black,
                 -2px -2px 2px black;
}

我想根据进入第二行的自然断点的位置来实现此输出：

string(35) "test test test test test\n test test "

如果可能的话，有什么想法吗？

【问题讨论】：

如果它在 2 行，很可能那里没有换行符。只有通过按回车添加了明确的换行符，换行符才会显示。通常，您看到的换行符只是一个自动换行符，它不会发送换行符，因为没有换行符。如果使用固定宽度字体（又名等宽字体），您可以估计宽度的字符数并添加您自己的换行符。除此之外，您会猜测文本的宽度，然后在 X 个字符之后插入。
好的...但我需要一个。有什么建议可以以某种方式实现这一目标吗？
您可以在 X 个字符后插入换行符，但除非您有固定宽度的字体，否则您只能猜测文本的宽度。

标签： javascript php jquery html css

【解决方案1】：

您可以添加属性wrap="hard"，它会在它换行的地方发送一个换行符：

<textarea wrap="hard" name="text-1" id="text-1" rows="2" maxlength="35">Click here to enter text</textarea>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

编辑：

必须指定 cols 属性。

【讨论】：

哦，不错，没看过这个。谢谢。

【解决方案2】：

如果你使用the wordwrap function，你可以近似它

$out = wordwrap($string, 70);

或者，如果您需要 HTML 中断

$out = wordwrap($string, 70, "<br />\n");

PS 请确保您事先对输入进行了清理，这样您就不会受到 XSS 和其他攻击。

【讨论】：