css之英文换行样式

在 CSS 中，要实现英文文本自动换行但不从单词中间断开的效果，可以使用 word-wrap 或 overflow-wrap 属性。以下是相关的 CSS 属性和它们的配置：

使用 overflow-wrap 或 word-wrap

/* This property is used to handle word breaking */
.word-wrap-example {
    overflow-wrap: break-word; /* or use 'word-wrap: break-word;' for older support */
    word-break: normal; /* Ensure words do not break in the middle */
}

各个属性详解

1. overflow-wrap (或 word-wrap):

   • break-word: 自动换行以避免溢出，同时不在单词中间进行换行。这是现代浏览器推荐使用的属性，word-wrap 是其别名，用于较旧的浏览器。

2. word-break:

   • normal: 依据默认的语言规则来处理换行。
   • break-all: 可在单词中间进行换行（不是我们希望的效果）。
   • keep-all: 不对中文、日文等字符换行，不常用于英文。