Question

我只是认为我为div的宽度和高度辩护，文本将在里面，但我不知道为什么文本在这种情况下会出现。为什么？怎么解决？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head>
        <title>Content Area Prototype 1</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />       
        <link rel="stylesheet" type="text/css" href="content.css" />    
    </head>

    <body>
        <div class="test">      zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
        </div>
    </body>
</html>

这是“content.css”

* {
    margin: 0;
    padding: 0;
}

body {
    width: 480px;
    height: 680px;
    margin: 0 auto;
    overflow: auto-scroll;
    background-color: #212121;
    font-family: "Segoe UI", sans-serif;
}

.test {
    padding: 0.3em;
    margin-bottom: 0.5em;

    background-color: #fff;
    border: 0.3em solid #59922B;
    border-radius: 1.2em;   
}

更新：我希望文本在div中自动换行。溢出：隐藏不起作用。

更新：为什么不是自动换行？

Answer 1

查看word-wrap CSS属性（docs）

通过将word-wrap: break-word;添加到.test CSS类，文本被约束到容器：

http://jsfiddle.net/K9tmT/

Answer 2

文本没有被分解，所以你需要在css中将自动换行设置为break-word。如果你在该文本的中间放置一个空格，那么你会发现它会分成2行。这与MS Word不会跨行分解单词背后的原理相同

Answer 3

尝试添加

 overflow: hidden;

或

 overflow: scroll;

到.test 和/或将身体的高度和宽度移动到.test

Answer 4

在这种情况下可以使用

CSS overflow属性

overflow: hidden;

中的

.test

工作示例：http://jsfiddle.net/EjFL5/

为什么这个文本会破坏div标签？怎么解决？

4 个答案: