如何使用 CSS 来防止连字符导致 HTML 文本区域中的字符串被破坏？答案

【问题标题】：How can one use CSS to prevent hyphens from causing a string to be broken in an HTML textarea?如何使用 CSS 来防止连字符导致 HTML 文本区域中的字符串被破坏？
【发布时间】：2021-12-11 15:17:52
【问题描述】：

使用 CSS（仅），如何防止连字符导致 textarea 中的字符串被破坏？

在以下最小可重现示例中，textarea 将显示：

margin-block-end: 20em; 
color: red; margin-block-
start: 50em;

但是，如果不添加换行符（或回车符），我希望 textarea 显示：

margin-block-end: 20em; 
color: red;
margin-block-start: 50em;

什么 CSS 可以用来完成这个？

请注意，我必须使用 CSS，因为我使用的是现有 WebExtension 的自定义 CSS 函数。

这是我目前所拥有的：

textarea {
  font-size: 14px;
  width: 17em;
  word-break: unset !important;
  word-wrap: unset !important;
  overflow-wrap: unset !important;
  hyphens: unset !important;
}

&lt;textarea&gt;margin-block-end: 20em; color: red; margin-block-start: 50em;&lt;/textarea&gt;

【问题讨论】：

所以我认为您不能更改 HTML/文本字符串中的任何内容是否正确？
我没有看到单独使用 CSS 来完成。
@avia 同意 - 可能无法单独由 CSS 完成，因为事情似乎是正常的 - 有趣的讨论，例如在github.com/w3c/csswg-drafts/issues/3434https://github.com/w3c/…
是的，您的链接在您的最后一条评论中包含两次网址。

标签： html css text textarea line-breaks

【解决方案1】：

只需广告white-space: nowrap 属性。你会用&#13;&#10;添加断线

textarea {
  font-size: 14px;
  width: 17em;
  word-break: unset !important;
  word-wrap: unset !important;
  overflow-wrap: unset !important;
  hyphens: unset !important;
  white-space: nowrap;
}

&lt;textarea&gt;margin-block-end: 20em;&amp;#13;&amp;#10;color: red;&amp;#13;&amp;#10;margin-block-start: 50em;&lt;/textarea&gt;

【讨论】：

哦，我刚刚看到你不会使用换行符。我摆弄了一下，这似乎不太可能，主要是因为 : 之后之间的空间。你可能需要用js美化