二、实践：
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#test1 div {
background:#a6f5f3;
float:left;
width:150px;
margin:10px;
font-size:16px;
font-family:simsun;
border:1px solid #ccc;
}
#test2 div {
background: #932983;
float:left;
width:150px;
margin:10px;
font-size:16px;
font-family:simsun;
border:1px solid #ccc;
word-wrap:break-word;
}
#test3 div {
background: #9eaab6;
float:left;
width:150px;
margin:10px;
font-size:16px;
font-family:simsun;
border:1px solid #ccc;
word-break: normal;
}
#test4 div {
background: #2288dd;
float:left;
width:150px;
margin:10px;
font-size:16px;
font-family:simsun;
border:1px solid #ccc;
word-break: break-all;
}
#test5 div {
background: #298319;
float:left;
width:150px;
margin:10px;
font-size:16px;
font-family:simsun;
border:1px solid #ccc;
word-break: keep-all;
}
</style>
</head>
<body>
<div id = "test1">
<div>
我是一个吃货，擅长吃各种好东西。我的希望是：每顿都能吃到好吃的。如果没有好吃的话，下顿有也行
</div>
<div>
下顿如果有的话，我就要好好多吃点儿，如果没有，我就留着，争取下下顿能吃到好吃的。
</div>
<div>
I'm a chihuo.love eating~
</div>
</div>
<div id = "test2">
<div>
我是一个吃货，擅长吃各种好东西。我的希望是：每顿都能吃到好吃的。如果没有好吃的话，下顿有也行
</div>
<div>
下顿如果有的话，我就要好好多吃点儿，如果没有，我就留着，争取下下顿能吃到好吃的。
</div>
<div>
I'm a chihuo.love eating~
</div>
</div>
<div id = "test3">
<div>
我是一个吃货，擅长吃各种好东西。我的希望是：每顿都能吃到好吃的。如果没有好吃的话，下顿有也行
</div>
<div>
下顿如果有的话，我就要好好多吃点儿，如果没有，我就留着，争取下下顿能吃到好吃的。
</div>
<div>
I'm a chihuo.love eating~
</div>
</div>
<div id = "test4">
<div>
我是一个吃货，擅长吃各种好东西。我的希望是：每顿都能吃到好吃的。如果没有好吃的话，下顿有也行
</div>
<div>
下顿如果有的话，我就要好好多吃点儿，如果没有，我就留着，争取下下顿能吃到好吃的。
</div>
<div>
I'm a chihuo.love eating~
</div>
</div>
<div id = "test5">
<div>
我是一个吃货，擅长吃各种好东西。我的希望是：每顿都能吃到好吃的。如果没有好吃的话，下顿有也行
</div>
<div>
下顿如果有的话，我就要好好多吃点儿，如果没有，我就留着，争取下下顿能吃到好吃的。
</div>
<div>
I'm a chihuo.love eating~
</div>
</div>
</body>
</html>
原文：http://blog.csdn.net/bwshqh/article/details/50861033