                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /如何用CSS进行网页布局

为什么字母a没有自动换行，而是顶出右边了

<!DOCTYPE html>

<html>

<head>

body{margin:0; padding: 0;font-size: 20px;}

div{text-align:center;line-height: 30px; }

.main{width:960px; margin:0 auto;position:relative;}

.left{background-color: red; width:200px;height:500px;position: absolute;left:0; top:0;}

.middle{height:500px;margin: 0 160px 0 200px;border:1px solid green;}

.right{background-color: blue; width:160px; height:500px;position:absolute;right:0; top:0;}

</style>

</head>

<body>

<div class="middle">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

<div class="right">right</div>

</div>

</body>

</html>

天生我才必有用哈

2016-11-21

源自：如何用CSS进行网页布局 4-1

关注问题我要回答

1000

操作

收起

2 回答

拴栓回答被采纳 +3 积分
2016-11-21

这样一串连续的字符会被创建为一个无名块框，如果中间没有空格，默认不会换行，可以改变换行机制，对middle设置word-wrap: break-word; 让其强制换行，即使没有空格也换行，一般连续的一串字符是一个单词(word)，所以是break-word；也可以设置overflow:hidden或者overflow：auto，这样会自动隐藏溢出的内容或者出现滚动条；