textarea中的CSS空白属性？答案

【问题标题】：css white-space property in textarea?textarea中的CSS空白属性？
【发布时间】：2013-04-15 23:31:24
【问题描述】：

我想在 HTML textarea 中使用 white-space CSS 属性。

基本上，如果有人在textarea 中键入带有换行符的一堆文本，然后将此数据提交到MySQL 中存储，我想使用white-space CSS 属性在文本区域中显示这些换行符。但是当我尝试它时，它不起作用，只是将文本全部显示在一个大段落中，没有任何中断或任何东西。有没有办法做到这一点？

<form action="includes/changebio.php" method="post" id="form1">         
 <textarea id="bio" style="width: 440px; 
    margin-top:3px;
    text-align:left;
    margin-left:-2px;
    height: 120px;
    resize: none; 
  outline:none;
  overflow:scroll;

  **white-space:pre-line;**

    border: #ccc 1px solid;" textarea name="bio" data-id="bio" maxlength="710" placeholder="<?php echo stripslashes($profile['bio']); ?>"></textarea>
<input type="image" src="assets/img/icons/save-edit.png"class="bio-submit" name="submit" value="submit" id="submit"/>
</form>

【问题讨论】：

这个“将文本全部显示在一个大段落中”的“它”是什么？听起来您的问题出在提交的用户输入的 processing 中，而不是在 textarea 元素的样式中。该元素，如示例代码所示，没有内容。

标签： css textarea

【解决方案1】：

textarea{white-space:pre}

当我看到这个时，这是因为您的 textarea 正在从某些东西继承 white-space:nowrap。它也可以通过 textareas 上的 wrap="no" 来复杂化，这有时会很有用。

textarea nowrap 的默认行为是 pre，因此只需在样式底部按上述方式设置 css 即可覆盖设置空白的任何位置。

如果您检查您的 textarea 元素，您肯定会发现在层次结构中的某处，您在某些类型的元素上设置了 nowrap 属性，该属性覆盖了默认的 textarea 行为。

【讨论】：

【解决方案2】：

不要。

<textarea> 元素已经按字面意思处理空格。无需尝试将事情掌握在自己手中。

【讨论】：

那么知道为什么文本会显示为一个没有空格的大段落吗？
您试图覆盖它，但效果不佳。我不知道浏览器如何处理它，确切地说，但“不正确”只是总结了一下。只需完全删除 white-space 属性即可。

【解决方案3】：

对我来说，一切似乎都很好......将它扔进一个代码笔只是为了测试它。直接添加时，换行符在文本区域内显示良好。

不知道发生了什么。 PHP是否剥离换行符？您是否在通过 $profile['bio'] 传递的任何内容周围使用双引号？

这里有一个可能对你有帮助的答案：The .val() of a textarea doesn't take new lines into account

最后一个响应，特别是。根据您的代码，听起来 .replace() 方法不是您需要的（但我可能是错的......也许我不明白您在做什么）。

【讨论】：