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

Posted 2023-05-07

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

【英文标题】：How can one use CSS to prevent hyphens from causing a string to be broken in an HTML textarea?

【发布时间】：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;

<textarea>margin-block-end: 20em; color: red; margin-block-start: 50em;</textarea>

【问题讨论】：

所以我认为您不能更改 html/文本字符串中的任何内容是否正确？

我没有看到单独使用 CSS 来完成。

@avia 同意 - 可能无法单独由 CSS 完成，因为事情似乎是正常的 - 有趣的讨论，例如在github.com/w3c/csswg-drafts/issues/3434https://github.com/w3c/…

是的，您的链接在您的最后一条评论中包含两次网址。

【参考方案1】：

只需广告white-space: nowrap 属性。你会用
添加断线

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

<textarea>margin-block-end: 20em;
color: red;
margin-block-start: 50em;</textarea>

【讨论】：

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