CSS學習(十三)-文本換行符技巧


一、理論:
1.word-wrap 用來斷詞而不是斷字符
2.word-break:
a.break-all 可以允許非中文斷開
b.keep-all 在中文里不允許字斷開
2.white-space:
a.nowrap 文本強制不換行
b.pre 顯示預定義文本格式
3.瀏覽器適應:
a.在ie下使用word-wrap:break-word聲明可以確保所有文本正常顯示
b.在firefox下需要采用word-wrap:break-word和overflow:hidden結合

二、實踐:

1.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
pre{
background: #aeaeae;
white-space: pre-wrap;
white-space: pre-line;
white-space: -o-pre-wrap;
white-space: -moz-pre-wrap !important;
word-wrap: break-word;
}
table{
background: #829516;
table-layout: fixed;
width:50px;
}
table td{
background: #31b2c6;
overflow: hidden;
word-wrap: break-word;
}
#div1 p{
background: #f5f5f5;
width:50px;
overflow: hidden;
word-wrap: break-word;
}
#div2 p{
background: #f98263;
width:50px;
white-space: nowrap;
word-break: keep-all;
}
</style>
</head>
<body>
<pre>
我是一個吃貨,擅長吃各種好東西。我的希望是:每頓都能吃到好吃的。如果沒有好吃的話,下頓有也行
</pre>

<table>
<tr>
<td>
下頓如果有的話,我就要好好多吃點兒,如果沒有,我就留着,爭取下下頓能吃到好吃的。
</td>
</tr>
</table>

<div id="div1">
<p>
我是一個吃貨,擅長吃各種好東西。我的希望是:每頓都能吃到好吃的。如果沒有好吃的話,下頓有也行
</p>
</div>

<div id="div2">
<p>
下頓如果有的話,我就要好好多吃點兒,如果沒有,我就留着,爭取下下頓能吃到好吃的。
</p>
</div>
</body>
</html>



注意!

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



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