关于p标签内容换行问题

今天同事突然给我反馈了一个这样的问题,我一看,什么鬼,怎么变成这样了。就看了一下代码,发现每一行右边的p标签用了absolute属性,所以就导致了发生了这样的事情。

BUG图片

拿到手的第一想法,把absolute属性去掉就是了,然后通过margin来控制定位与左边对齐,这样右边p标签的高度就可以跟着内容自适应了。

第一次修改后的图片

纳尼,为什么第一行是这样的,这么难受吗。我又好好看了一下代码,好像没什么问题,就搜了一下,发现浏览器对中英文字符处理是不一样的。

准确的说是对中日韩文本和其他文本处理不一样,我上面第一行的链接会被浏览器当做一个单词展示,所以不会换行的。

既然还有这种操作,那也只能默默承受了。于是我又好好去看了一下w3c的CSS文本属性,发现了解决办法。

CSS文本换行

在文本属性的最后,我发现了有这么三个属性text-wrapword-breakword-wrap

三个属性图

这三个属性都是规定文本的换行规则的,但是text-wrap属性目前主流浏览器都不支持,所以我们只关注下面的两个属性。

word-break

从描述上已经知道了非中日韩文本的换行容易出现问题,可以使用该属性解决,它的属性值主要有以下三个:

  • normal //使用浏览器默认的换行规则
  • break-all //允许在单词内换行
  • keep-all //只能在半角空格或连字符处换行

大概是什么意思呢,break-all就是当一个单词在上一行显示不下时,可以在单词内换行,一部分到下一行中去;keep-all也是可以换行,但是不允许将一个单词折断,如果一个单词在上一行显示不下,会在单词前面的空格处换行,但是这会导致一个问题,如果单词过长的话,第二行也显示不下的时候单词是不会再换行了。

break-word

这个属性就可以很好的解决我的问题,允许长单词或URL地址换行到下一行,它的属性值只有两个:

  • normal //只在允许的断字点换行
  • break-word //在长单词或者URL地址内部进行换行

这里也需要解释一下,其实normal属性跟word-breakkeep-all属性的功能是一致的,而break-word则是将break-allkeep-all的功能进行了叠加,即一行展示不下时,单词会换到下一行,如果下一行再显示不下则会在单词内进行换行处理。

结语

有了上面的两个属性,我们的BUG就被开心的解决了,但是对于文本换行的处理,不止这些,因为会涉及到一个空格转换的问题,浏览器对空格的处理和对 的处理是不一样的。不过这里就没深究了,感兴趣的同学可以查看一下AlloyTeam博客的这篇文章:【CSS单词换行and断词,你真的完全了解吗】