关于p元素无法自动换行的问题

代码:

  

111111111111111111111111111111111111111111111111111111111111111111111

效果:(采用栅格系统也一样)

关于p元素无法自动换行的问题_第1张图片

解决方法:

p{
  word-wrap:break-word;
// 或者 word-break: break-all;
}

释义:

1.white-space:设置如何处理元素间的空白,默认为normal,表示空白会被浏览器忽略,white-space: nowrap;表示不换行。
2.word-break:规定自动换行的处理方法。normal:使用浏览器默认换行规则,break-all:允许在单词内换行,keep-all:只能在半角空格或连字符处换行。
3.word-wrap:允许长单词或URL地址换行到下一行。normal:只在允许的断字点换行(浏览器保持默认处理),break-word:在长单词或URL地址内部进行换行。

word-break: break-all;

关于p元素无法自动换行的问题_第2张图片

word-wrap: break-word;
关于p元素无法自动换行的问题_第3张图片

若两个属性同时存在,以word-break: break-all;为准。

你可能感兴趣的:(关于p元素无法自动换行的问题)