<textarea style="width:100px; word-wrap:break-word;">
  place your text here
</textarea>

<textarea style="width:100px; word-wrap:break-word;">
  place your text here
</textarea>

使用超级>标签:

ACTGATCG<wbr>AGCTGAAG<wbr>CGCAGTGC<wbr>GATGCTTC<wbr>GATGATGC

我认为这比使用零宽度空间更好​这可能会导致问题，当你复制文本。

下面是我使用空白的代码:预换行;

.code {
    width: 90vw;
    white-space: pre-wrap;
    font-family: inherit;
    word-break: break-word;
    overflow-wrap: break-word;
    line-break: auto;
}

我知道带值的看起来很奇怪，你应该把它改成适合你需要的值。

我不认为CSS可以做到这一点。相反，在字符串中按常规的“字长”插入一个HTML软连字符:

ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG

这将在行尾的换行处显示一个连字符，这可能是您想要的，也可能不是。

注意与Firefox不同，Safari似乎将长字符串包装在<textarea>中。

以下是一些非常有用的答案:

如何防止长词打破我的div?

为了节省你的时间，这可以用css解决:

white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
word-break: break-all;