如何使用CSS来防止连字符导致字符串在HTML文本区断开?

Question

使用CSS (only)如何防止连字符在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，因为我使用的是自定义CSS现有webeextension的功能。

这是我目前为止写的:

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>

Answer 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;&#13;&#10;color: red;&#13;&#10;margin-block-start: 50em;</textarea>