css-CSS文本强制换行 

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>CSS文本强制换行</title>
    <style>
        *
        {
            margin: 0;
            padding: 0;
        }

        body
        {
            color: #333;
        }

        .word
        {
            width: 100px;
            border: 1px solid #7344ed;
            background: #b8a4eb;
            margin: 5px 20px 20px;
        }

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

        .style3
        {
            word-wrap: break-word;
        }

        h3
        {
            margin: 10px 20px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <h3>宽为100px的div中，一长串没有空格的字符、字母或数字，默认不换行。</h3>
    <div class="word style1">
        beautifulbeautiful
    </div>
    <h3>word-break:break-all，强制换行，长单词beautiful会被截断。</h3>
    <div class="word style2">
        You are beautiful.
    </div>
    <h3>word-wrap:break-word，强制换行，长单词beautiful不会被截断，放至下一行。</h3>
    <div class="word style3">
        You are beautiful.
    </div>
</body>
</html>
参考示例

 

posted @ 2013-11-04 17:22  琦琦狐  阅读(578)  评论(2)  编辑  收藏  举报