如何让按钮中的连字符文本按整词换行？CSS word-wrap等属性无效

要让hello单独一行，this-is-a-test作为整体在下一行，你可以通过以下两种方法实现：

方法一：用CSS禁用自动断字 #

浏览器默认会把带连字符的文本视为可在连字符位置换行的内容，添加hyphens: none可以禁止这种行为，结合按钮的固定宽度，文本会在空格处自动换行：

#btn {
  width: 90px;
  hyphens: none;
}

对应的HTML和JS保持不变：

<button id="btn"></button>

const btn = document.getElementById("btn");
btn.innerHTML = 'hello this-is-a-test'

方法二：手动插入换行符 #

如果需要更直接的控制，可以在动态设置文本时加入<br>标签强制换行：

const btn = document.getElementById("btn");
btn.innerHTML = 'hello<br>this-is-a-test'

这种方式不需要额外修改CSS，就能精准控制换行位置。

内容的提问来源于stack exchange，提问作者Grambam