CSS中设置了宽度,但是其中的内容溢出而不换行

644 阅读1分钟

当我们为div标签或者p标签等设置了宽度,会出现文本溢出并且不会换行的情况,一般这种情况都是只有文本内容为单词或者纯数字的时候出现的。
原因是由于:浏览器在解析我们页面的时候,给这一串数字当成一个词了,这样就不会自动切断字符串而进行换行。

解决方法:

**方法一:**CSS 属性 word-break 指定了怎样在单词内断行。

word-break: break-all;
word-break: break-word;

方法二:CSS 属性 overflow-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时,为防止其溢出,浏览器是否允许这样的单词中断换行。

overflow-wrap: break-word;

方法一:内容到达指定宽度强行断句换行,一个单词显示不开将会截断换行继续展示;当前单词在宽度内无法展示,整个单词换行展示; word-break: break-all;会将单词截断换行显示;
word-break: break-word;会整个单词换行显示

图片.png

图片.png