换行 word-wrap:break

作者: Simon_s | 来源:发表于2016-09-27 19:19 被阅读23次

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 200px;
background-color: blue;
/强制换行当前行放不下这个单词则整个单词换下一行显示。如果下一行还放不下，则将单词拆分显示/
word-wrap: break-word;

     /*break-all 允许在单词内换行 */
    /*keep-all 支持不好  safari 和 chrome 不支持*/

    
    /* 直接在本行显示 不会整个单词换行 如果显示不下 则将单词拆分显示 */
    word-break: break-all;
}
</style>

</head>
<body>
<div id="box">
我的高中是在家乡的小镇上读的，校门口就是216省道，沿着省道走10几分钟有一座大桥，桥下面就是“香河”，河流是汉江的分支，水势汹涌，河流湍急。
</div>
</body>
</html>