Rumah  >  Artikel  >  hujung hadapan web  >  CSS学习(十二)-文本换行符_html/css_WEB-ITnose

CSS学习(十二)-文本换行符_html/css_WEB-ITnose

WBOY
WBOYasal
2016-06-24 11:24:311072semak imbas

一、理论:
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.

    <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><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>


Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn