[HTML&CSS基础]当内容超过盒模型时
第16行写成
<div id="box1">盒子11111111111111111111111111111111</div>
然后内容就会不换行从右侧直接超过边框。把那堆1换成中文文字,就会自动换行,从下侧超过边框。 这是为什么呢?
第16行写成
<div id="box1">盒子11111111111111111111111111111111</div>
然后内容就会不换行从右侧直接超过边框。把那堆1换成中文文字,就会自动换行,从下侧超过边框。 这是为什么呢?
2018-03-29
这是一个好问题哈,
#box1{
width:200px;
height:200px;
position:relative;
/*注意这里!!!注意这里!!!注意这里!!!
你只要添加这俩其中一个,字母和数字,都可以自动换行啦,不会超过边框啦*/
word-wrap: break-word;
word-break: break-all;
}word-wrap: break-word;
word-break: break-all;
究竟是什么呢?
word-break 属性规定自动换行的处理方法。
提示:通过使用 word-break 属性,可以让浏览器实现在任意位置的换行。
语法
word-break: normal|break-all|keep-all;
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。

word-wrap : normal | break-word
参数: normal : 允许内容顶开指定的容器边界break-word : 内容将在边界内换行。如果需要,词内换行(word-break)也行发生
举报