css一长串连续英文字符的换行

在标签内,中文的换行是没有什么问题的,但英文的换行就有问题。当出现一长串连续的英文字符时,换行就失效了,内容会溢出。解决这个问题只需要一行css就够了:

p{
   word-wrap: break-word;  
}

那么问题来了,英文的换行是实现了,但是你会发现,一连串英文全部另起一行了,这就和预计的效果不一致。

原因是连续的一连串英文字符,浏览器会把它识别为一个单词,那么换行当然是一个单词一起换了,解决这个问题只要在原本的基础上再加一句:

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

至此,就可以正确实现连续英文字符的换行了。

原文地址:https://www.cnblogs.com/minz/p/7420568.html