CSS學習(十二)-文本換行符


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



注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com