能否仅用CSS实现按指定非空白字符拆分过长单词？

目前CSS里并没有word-break: "_"这种直接指定自定义拆分字符的属性，但有两种方法可以接近你要的效果：

1. 插入软连字符配合CSS（需微调HTML）
   要是能接受在HTML里给下划线位置加个软连字符­（比如把THIS_PHRASE_HERE改成THIS_­PHRASE_­HERE），再用下面的CSS：

   .fixed-width-div {
     width: 200px; /* 你的固定宽度 */
     overflow-wrap: anywhere;
     hyphens: manual;
   }
   

   这样浏览器会优先在软连字符的位置（也就是下划线后面）换行，既保留了下划线，又避免了乱拆字符的情况。

2. 纯CSS优化方案（无需修改HTML）
   如果完全不能碰HTML，就用word-break: break-all搭配text-wrap: pretty来改善换行美观度：

   .fixed-width-div {
     width: 200px;
     word-break: break-all;
     text-wrap: pretty;
   }
   

   text-wrap: pretty会尽量避免出现单行只剩1-2个字符的情况，比单纯用break-all好看很多，但它没法强制只在下划线处拆分，只是优化了换行逻辑。

要注意的是，目前标准CSS还做不到强制仅在指定字符（如下划线）处换行，上面第一种方法最贴合你的需求，第二种是纯CSS下的最优妥协方案。

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