精灵采集器

当前位置 :

>

正文

有的伙伴建站以后，会在自己的网站分享一些链接，并且有些链接是超长的，由于链接一般都是由字母、符号及数字组成，浏览器在处理显示连续字母时的默认方案是不做打断，按原样输出。所以过于长的链接会导致超出边界，会使得页面看起来很不协调，也有可能超出部分会覆盖边界外面的内容。

很显然，如果超长的链接会自动分配到两行或者三行显示，那么超出边界的问题也就迎刃而解了。

那么我们怎么让超长的链接实现自动换行呢？

我们需要使用css的“word-wrap”属性即可实现自动换行。

word-wrap

该属性允许长单词或 URL 地址换行到下一行。

语法：

word-wrap: normal | break-word ;

说明：

normal 只在允许的断字点换行（浏览器保持默认处理）；

break-word 在长单词或 URL 地址内部进行换行。

看到这里您应该已经明白，要强制自动换行的话很简单，只需要在需要自动换行的容器里加上“word-wrap: break-word;”即可。下面是一个实例：

<h4 style="word-wrap:break-word">test text</h4>

扩展阅读

word-break

该属性规定自动换行的处理方法。

语法：

word-break: normal | break-all | keep-all ;

说明：

normal 使用浏览器默认的换行规则；

break-all 允许在单词内换行；

keep-all 只能在半角空格或连字符处换行。

overflow-wrap

该属性设置或检索当内容超过指定容器的边界时是否断行。

这个属性是CSS3增加的，CSS3中将“word-wrap”改名为“overflow-wrap”，浏览器支持情况：Chrome（23.0+）、Safari（6.1+）、Opera（15.0+）、iOS Safari（7.0+）、 Android Browser（4.4.0+）、Android Chrome（22.0+）

语法：

overflow-wrap：normal | break-word ;

说明：

normal：允许内容顶开或溢出指定的容器边界；

break-word：内容将在边界内换行。如果需要，单词内部允许断行。

提示：由于历史原因，当你使用“overflow-wrap”时，最好同时使用“word-wrap”作为备选，作向前兼容。