您的位置：首页 > Web前端 > CSS

CSS学习（十二）-文本换行符

2016-03-12 00:56 651 查看

一、理论：

1.word-wrap:

a.normal 在半角空格或连字符的地方进行换行

b.break-word 不截断英文单词换行

2.word-break:

a.normal 中文到边界上的汉字换行，英文从整个单词换行

b.break-all 强行截断英文单词换行

c.keep-all 不允许字断开

3.while-space:

a.normal 默认值

b.pre 文本空白处会被浏览器扣留

c.nowrap 文本会在同行上直到遇到换行符

d.pre-line 合并空白符序列，保留换行符

e.pre-wrap 保留空白符序列，正常进行换行

f.inherit 继承父元素的while-space属性

二、实践：

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航