Why does this text breaks div tag? How to fix it?
I just think I justify div's width and height and the text will be inside but I don't know why the text goes outside in this case. Why? How to fix it?
<!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>
This is "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;
}
Update: I want the text is word-wrap in div. overflow: hidden not work.
Update: Why isn't word-wrap default?
Check out the word-wrap CSSproperty (docs)
By adding word-wrap: break-word; to the .test CSS class, the text is constrained to the container:
http://jsfiddle.net/K9tmT/
the text isn't broken up so you need to set the word-wrap to break-word in the css. If you were to put a space in the middle of that text then you will see it will break up into 2 lines instead. It's the same principal behind how MS Word won't break up a word across lines
CSS overflow property can be use in this case
overflow: hidden; in .test
Working example : http://jsfiddle.net/EjFL5/
Try with adding
overflow: hidden;
or
overflow: scroll;
to .test and/or move height and width from body to .test
加载中,请稍侯......
精彩评论