Vue项目中英文文本展示时的换行差异及原因咨询

• 中文自动换行的原因：中文是表意文字，每个汉字都是独立的语义单元，浏览器默认会在任意汉字之间拆分换行，只要内容超出容器宽度就会自动换行，不需要额外分隔符。

• 英文不自动换行的原因：英文以空格作为单词的分隔标识，浏览器默认仅在空格、连字符这类分隔符位置换行。如果是连续无空格的英文内容（比如超长单词、无空格连接的字母串），会被识别成一个不可拆分的整体，当这个整体宽度超过容器时就会溢出，不会自动换行。

如果要解决英文不换行的问题，可给容器添加CSS样式：

word-break: break-all;
/* 或使用 overflow-wrap: break-word; */

word-break: break-all 会强制在任意字符处换行，适合需要拆分长串英文的场景；overflow-wrap: break-word 优先在单词分隔符处换行，仅当单词本身超出容器时才拆分单词。

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