如何按特殊字符拆分单词？如何实现字符串150px宽并在连字符处换行？

可以用JavaScript的split()方法，根据目标特殊字符或正则表达式拆分字符串：

• 拆分单个特殊字符（比如连字符-）：

const str = "12333-2333-233-23339392-332332323";
const splitResult = str.split('-');
console.log(splitResult); // 输出: ["12333", "2333", "233", "23339392", "332332323"]

• 拆分多种特殊字符（比如同时匹配-、_、@）：
  用正则表达式匹配所有目标特殊字符：

const str = "abc-def_ghi@jkl";
const splitResult = str.split(/[-_@]/);
console.log(splitResult); // 输出: ["abc", "def", "ghi", "jkl"]

• 匹配任意非字母数字的特殊字符：
  用正则/[^\w]/匹配所有非字母、数字、下划线的字符：

const str = "test!@#$%^&*()_+=-[]{}|;:'\",.<>?/`~";
const splitResult = str.split(/[^\w]/);
console.log(splitResult); // 输出: ["test", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""]

仅设置width:150px无法保证在连字符处自动换行，需添加额外CSS属性控制换行规则：

方案1：使用overflow-wrap: break-word #

该属性允许浏览器在容器宽度不足时，优先在连字符等分隔符处断开长字符串：

div {
  width: 150px;
  overflow-wrap: break-word; /* 现代浏览器兼容 */
  word-wrap: break-word; /* 旧版浏览器兼容 */
}

方案2：使用hyphens: auto（需指定语言） #

结合语言属性，让浏览器自动处理连字符位置的换行：

div {
  width: 150px;
  hyphens: auto;
}

对应的HTML需添加语言标识：

<div lang="zh-CN">
  12333-2333-233-23339392-332332323
</div>

完整示例代码 #

div {
  width: 150px;
  overflow-wrap: break-word;
  border: 1px solid #ccc; /* 方便查看容器范围 */
}

<div>
  12333-2333-233-23339392-332332323
</div>

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