[分享]css中字母超出折行

CSS中的文字折行问题是我们常常遇到的问题之一。当我们在页面中使用大段文字描述或者是在设置标题时，如果文字过长会导致整体布局受到影响，这时就需要使用到CSS中的折行样式。wordbreak: brea...

CSS中的文字折行问题是我们常常遇到的问题之一。当我们在页面中使用大段文字描述或者是在设置标题时，如果文字过长会导致整体布局受到影响，这时就需要使用到CSS中的折行样式。

word-break: break-all; 

使用上述样式可以实现单词级别的折行。但是如果出现的文字是连续的一串字符，那么使用上述样式就可能会让文本容器发生内部崩溃。比如常见的URL链接就是一串连续的字符，使用折行样式后会导致链接断裂。

overflow-wrap: break-word;
word-wrap: break-word; 

所以我们需要使用如上的两种样式，它们可以实现单词级别和连续字符级别的折行。这样可以避免出现布局混乱的情况，同时可以让内容更加易读易懂。