html中长英文字符串不能换行溢出元素的问题解决方法

分类:计算机 | 前端 | 综合 276
更新:2020-10-24 19:16:38
编辑

1 问题说明

在h1元素中有一个很长的一串英文的话发现不能自动换行,溢出了h1元素,如图所示:

2 解决方法

给h1元素样式添加word-wrap和word-break的属性,如下代码:

h1{
  word-wrap:break-word;
  word-break:break-all;
}

改完后的效果如下:

3 word-wrap和word-break说明

word-wrap:break-word与word-break:break-all共同点是都能把长单词字符串强行断句。

不同点是word-wrap:break-word会首先起一个新行来放置长单词, 新的行还是放不下这个长单词的话,则会对长单词进行强制断句,如图所示: 而word-break:break-all则不会把长单词放在一个新行里, 当这一行放不下的时候就直接强制断句了,如图所示: