图解CSS3----word-break单词断行

最新推荐文章于 2022-09-15 09:30:00 发布

weixin_34254823

最新推荐文章于 2022-09-15 09:30:00 发布

阅读量98

点赞数

原文链接：http://www.cnblogs.com/SunlikeLWL/p/7239348.html

版权

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>word-break单词断行</title>
    <style type="text/css">
    .head {
        margin: 0 0 0 100px;
    }

    .container {
        margin: 0 0 0 100px;
    }

    .container div {
        width: 300px;
        height: 100px;
        border: 1px solid red;
        margin: 0 0 20px 0;
    }

    .d1 {
        word-break: normal;
    }

    .d2 {
        word-break: break-all;
    }

    .d3 {
        word-break: keep-all;
    }
    </style>
</head>

<body>
    <div class="head">
        <h1>word-break单词断行</h1>
        <h2>首页<a href="index.html"></a></h2>
    </div>
    <div class="container">
    <h2>word-break: normal;</h2>
        <div class='d1'>
            阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 sunlike sunlike sunlike sunlike sunlikesunlikesunlikesunlike sunlikesunlikesunlikesunlikesunlikesunlikesunlikesunlike
        </div>
        <h2> word-break: break-all;</h2>
        <div class='d2'>
            阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 sunlike sunlike sunlike sunlike sunlikesunlikesunlikesunlike sunlikesunlikesunlikesunlikesunlikesunlikesunlikesunlike
        </div>
        <h2>word-break: keep-all;</h2>
        <div class='d3'>
            阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 阿理旺旺 sunlike sunlike sunlike sunlike sunlikesunlikesunlikesunlike sunlikesunlikesunlikesunlikesunlikesunlikesunlikesunlike
        </div>
    </div>
</body>

</html>

效果1：