html - 防止包含破折号 (-) 的单词断开？

Question

是否有一个 css 属性会像 --TestCanvas-min-width 这样的文本在 - 上中断？我试过 word-break: keep-all，但它仍然在破折号处中断。

Answer 1

你可以尝试类似 white-space: nowrap; 的东西.

您可以阅读更多相关信息 here

所以你会添加<span>并将其应用于它。

.my--div {
  width: 150px;
  border: 1px solid;
}

.my--span {
  white-space: nowrap;
  color: red;
}

<div class="my--div">--TestCanvas-min-width--TestCanvas-min-width--TestCanvas-min-width<span class="my--span">--TestCanvas-min-width--</span>TestCanvas-min-width</div>