Question

我不确定问题出在哪里，但是如果在按住键盘上的单个键的同时输入文本区域，数据库的输出将显示为单行，这会破坏页面的格式。本质上，我只有一行很长的文字，例如aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa，它不在页面上并且没有任何换行符。

换句话说，如果我没有手动输入enter在我的文本区域中创建换行符，或者如果我不使用spacebar编写看起来很正常的内容句子，即使我在键入文本时将文本向下推到一行，也不会出现换行符。

我已经使用普通的PHP脚本尝试过此操作，不过滤任何内容（我还确保在渲染文本时不过滤任何内容），但这种情况仍然会发生。为什么是这样？我有什么办法可以确保我的textarea在键入时将文本按下时自动添加新行？

我没有在HTML中使用cols或rows，而是通过CSS生成了高度和宽度。

HTML：

<form action="foo.php" method="post">
    <textarea id="1"></textarea>                                   
    <input id="submit" type="submit" name="submit" value="Comment" />
</form>

CSS：

#1 {
    width: 100%;
    min-height: 126px;
    box-sizing: border-box;
    overflow: hidden;
    resize: none;
    font-size: 15px;
    color: black;
    margin-bottom: 16px;
    padding: 4px 8px;
    border: 2px solid #0716a2;
    border-radius: 0 0 4px 4px;
}

提及复制和粘贴未格式化的文本（即不是来自this之类的网站）时，发生这种情况也可能会有所帮助。我的文本区域应该可以容纳多个段落。

Answer 1

对我来说听起来像是文本被简单地正常渲染。

检查以下具有以下CSS的HTML：

div {
  border: 1px solid red;
  width: 400px;
}

这段HTML：

<div>
  aaaaaa
</div>

渲染器：

但是，这：

<div>
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

渲染此：

但是，这：

<div>
  aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaaaa
</div>

渲染此：

这很标准。但是，如果要解决此问题，可以添加以下样式：

overflow-wrap: break-word;

这将导致长单词分解，像这样（用一些额外的填充文本来显示它不会不必要地分解其他单词）：

我希望有帮助。

为什么我的textarea中提交的文本呈现为一行？

1 个答案: