如何用CSS实现长单词断词且不单独换行至新行？

要达到你想要的显示效果，可通过以下方式处理：

• 使用 overflow-wrap: break-word 替代 overflow-wrap: anywhere，同时给容器设置固定宽度或最大宽度（比如 width: 150px，根据实际需求调整）。
• 可选搭配 hyphens: auto，让浏览器根据语言规则自动优化断词显示。

示例代码 #

p {
  width: 150px; /* 自定义容器宽度 */
  overflow-wrap: break-word;
  hyphens: auto; /* 可选优化项 */
}

原理说明 #

overflow-wrap: break-word 会优先尝试将"10"与长单词的前缀放在同一行，仅当剩余空间无法容纳完整单词时，才会在单词内部断词换行，完全匹配你期望的效果。而 overflow-wrap: anywhere 会忽略元素的最小内容宽度约束，容易导致长单词被强制单独换行，这正是你之前遇到的问题。

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