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

eme*_*ieu 2 html css

我只是认为我证明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>
Run Code Online (Sandbox Code Playgroud)

这是"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;   
}
Run Code Online (Sandbox Code Playgroud)

更新:我希望文本是div中的自动换行.溢出:隐藏不起作用.

更新:为什么自动换行默认?

Chr*_*ker 9

查看word-wrapCSSproperty(docs)

通过添加word-wrap: break-word;.testCSS类,文本被约束到容器:

http://jsfiddle.net/K9tmT/

  • 默认为"normal".这只会在自然词障碍 - 即一个空间 - 打破一个词.如果你将非常长的文本放入一个容器中,那么该行就没有自然的地方 - 想想它.浏览器如何知道打破"zzzzz ......等"可以接受的位置.这个例子很简单,但对于一个长词来说它可能非常重要,浏览器会考虑比div更重要的文本(应该如此).如果你告诉它'break-word`,你就是"允许"做任何必须做的事情,以兑现容器大小,即使它意味着"打破"一个单词. (2认同)