html - 让 textarea 换行

Posted 2023-05-07

【中文标题】html - 让 textarea 换行

【英文标题】：html - make textarea wrap mid-word

【发布时间】：2014-07-27 09:42:55

【问题描述】：

我想将文本区域设置为在文本到达区域边缘时在单词中间换行。例如：

普通文本区域行为： 词词词 长字

我想要的行为： 字字字罗 单词

看起来很简单，但我已经搜索过，我找不到任何解决方案，肯定有一个属性或 CSS 属性，对吧？

【问题讨论】：

为什么？这听起来像可用性差：它使用户感到困惑。如果您实际上是使用textarea 来显示数据，那么您可能解决了错误的问题。

当您的文本区域不代表单词但一系列不同类型的字符（包含数字、字母、空格、连字符和其他在女巫默认世界换行中的其他字符）以可编辑的形式时可能很有用。当字母不组成单词时，没有理由在字母系列的末尾中断。

【参考方案1】：

您可以尝试word-wrap (overflow-wrap) 和/或word-break CSS 属性：

textarea

    word-wrap:break-word;
    word-break:break-all;

JSFiddle demo

【参考方案2】：

快速谷歌，发现：How to word wrap text in html?。

我自己在这里尝试一下：JSFiddle

我使用了这个代码。

<div style="width:50px; word-wrap:break-word">
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>