在 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 */
}
各个属性详解
-
overflow-wrap
(或word-wrap
):break-word
: 自动换行以避免溢出,同时不在单词中间进行换行。这是现代浏览器推荐使用的属性,word-wrap
是其别名,用于较旧的浏览器。
-
word-break
:normal
: 依据默认的语言规则来处理换行。break-all
: 可在单词中间进行换行(不是我们希望的效果)。keep-all
: 不对中文、日文等字符换行,不常用于英文。