如何使用CSS禁止textarea内文本在连字符位置自动换行

问题描述 #

现有textarea的默认显示效果会把带连字符的属性从连字符位置断开：

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

期望仅在空格位置换行，不拆分带连字符的内容，效果如下：

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

要求仅通过CSS实现，适配浏览器扩展的自定义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>

解决方案 #

调整换行相关的CSS规则，指定仅允许在空格位置换行，禁止拆分带连字符的单词/属性名即可，修改后的CSS如下：

textarea {
  font-size: 14px;
  width: 17em;
  /* 禁用自动连字符断行 */
  hyphens: none !important;
  /* 仅当单词长度超过容器宽度时才允许拆分单词 */
  overflow-wrap: normal !important;
  /* 禁止在单词内部（含连字符位置）断行 */
  word-break: keep-all !important;
  /* 保留空格和换行符，自动换行适配容器宽度 */
  white-space: pre-wrap !important;
}

规则说明 #

• hyphens: none 完全禁用浏览器的自动连字符断行逻辑，不会自动插入连字符拆分单词
• overflow-wrap: normal 只有当整个单词长度超过容器宽度无法放下时，才会拆分单词换行，正常长度的单词不会被拆分
• word-break: keep-all 对于拉丁文字内容，禁止在单词内部任意位置断行，连字符属于单词组成部分，不会从该位置拆分
• white-space: pre-wrap 保留文本中的空格和手动换行，同时自动换行适配容器宽度，符合textarea的常规使用需求

内容的提问来源于stack exchange，提问作者Amazon Dies In Darkness