问题原因:span为行内元素,不好换行
问题解决方案:1.改用p元素(块状元素),问题解决了
2.加上display:inline-block;word-wrap:break-word;
块状元素特点:
-
独占一行,在默认情况下,宽度自动填满父元素宽度
-
宽度和高度可以控制
-
margin和padding横向纵向设置都有效
-
可以通过display: inline; 转换为行内元素
-
可包含块状元素和行内元素
行内元素特点:
-
不能独占一行
-
宽高由内容撑开
-
margin和padding横向设置有效,纵向设置不产生边距效果
-
可以通过display: block; 转换为块状元素
-
不能包含块状元素