我只是认为我证明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中的自动换行.溢出:隐藏不起作用.
更新:为什么自动换行默认?
查看word-wrapCSSproperty(docs)
通过添加word-wrap: break-word;到.testCSS类,文本被约束到容器: