CSS英文单词强制换行、强制不换行和显示省略号
最近更新时间 2020-11-29 16:16:43
默认情况下英文单词和中文能正常换行显示,不需进行特殊处理。如果单词很长会超出边框显示,如下所示:
Honorificabilitu Taumatawhakatangihangakoauauotamateaturipukak
CSS 属性 word-break 指定了怎样在单词内断行。Black Friday Deals on Apple Products Continue
强制换行
使用 word-break:break-all;
进行强制换行,前一个是使用 break-word 按单词换行,后一个使用 break-all 的效果,如下所示:
Honorificabilitu Taumatawhakatangihangakoauauotamateaturipukak
CSS 属性 word-break 指定了怎样在单词内断行。Black Friday Deals on Apple Products Continue
Honorificabilitu Taumatawhakatangihangakoauauotamateaturipukak
CSS 属性 word-break 指定了怎样在单词内断行。Black Friday Deals on Apple Products Continue
/*按单词强制换行*/
.breakWord {
word-break: break-word;
overflow-wrap: break-word;
word-wrap: break-word; /* IE */
}
/*按单任意字符换行*/
.breakAll {
word-break: break-all;
}
注意:IE 不支持 word-break 的 break-word 值,IE 中使用微软的一个私有属性 word-wrap: break-word; 在 CSS3 规范中被重命名为 overflow-wrap。
强制不换行
使用 white-space: nowrap;
进行强制不换行换行,超过区域不显示使用 overflow: hidden;
。如需显示省略号使用 text-overflow:ellipsis;
。下面两个示例中第一个超出部分显示省略号,后一个只使用 white-space,如下所示:
Honorificabilitu Taumatawhakatangihan
/*强制不换行,超出部分显示省略号*/
.nowrap {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/*强制不换行*/
.nowrap {
white-space: nowrap;
}