首先认识一下这两个的写法
word-break: normal|break-all|keep-all;
word-wrap: normal|break-word;没有word-break和word-wrap修饰时候的样式：（如下图）
word-break和word-wrap都是CSS3的属性，支持IE5.5以上浏览器
word-break 允许在“单词”内行
也就是说将 每一个单词拆分成字符串的形式 来铺满一整行(直接上实例)
word-wrap 允许“长单词”换行到下一行
此时的每个单词都是一个整体，不可以被分割（直接上实例）
此时的Jachin变成一个单词换行，但是guangdongguangzhou虽然换行了由于单词的长度超过容器的宽度，所以会在容器宽度的范围进行截取。
<!DOCTYPE html>
<html lang="ZH-CN">
<head>
<meta charset="utf-8">
<title>CSS3 word-wrap和word-break长单词的换行</title>
<style type="text/css">
.box{
width:100px;
height: 200px;
border:1px solid #000;
background-color:#eee;
/*word-break: break-all;*/
/*word-wrap: break-word;*/
}
</style>
</head>
<body>
<div class="container">
<div class="box">
My name is Jachin.I live in guangdongguangzhou.
</div>
</div>
</body>
</html>
605
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
