《CSS3實戰》筆記--溢位文字省略:text-overflow和文字換行顯示:word-wrop
通過閱讀和學習書籍《CSS3實戰》總結
《CSS3實戰》/成林著.—北京機械工業出版社2011.5
語法:
text-overflow:clip | ellipsis | ellipsis-word
取值簡單說明:
clip
屬性值表示不顯示標記,而是簡單的裁切。ellipsis
屬性值表示當物件內文字溢位時顯示省略標記,省略標記插入的位置是最後一個字元。ellipsis-word
屬性值表示當物件內文字溢位時顯示省略標記,省略標記插入的位置是最後一個詞(word)。實際上,text-shadow屬性僅用於決定,當文字溢位時是否顯示省略標記,並不具備樣式定義的功能。要實現溢位時產生省略號的效果,應該再定義兩個樣式:強制文字在一行內顯示(
white-space:nowrap
overflow:hidden
),只有這樣才能實現溢位文字顯示為省略號的效果。
例項:設計固定寬度的新聞列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-overflow</title>
<style type="text/css">
dl {/*固定新聞欄目外框*/
width:240px;
border:solid 1px #ccc;
}
dt {/*設計新聞欄目標題行*/
padding:8px 8px;
background:#7FECAD url(images/green.gif) repeat-x;
font-size:13px;
text-align:left;
font-weight:bold;
color:#71790C ;
margin-bottom:12px;
border-bottom:solid 1px #efefef;
}
dd {/*設定新聞列表項樣式*/
font-size:0.78em;
height:1.5em;
width:220px;
padding:2px 2px 2px 18px;/*為新增新聞專案符號騰出空間*/
background:url(images/icon.gif) no-repeat left 25%;/*以背景圖片方式新增專案符號*/
margin:2px 0;
white-space: nowrap;/*為應用text-shadow做準備,禁止換行*/
overflow: hidden;/*為應用text-shadow做準備,禁止文字溢位顯示*/
-o-text-overflow: ellipsis; /* Opera */
text-overflow: ellipsis; /* IE, Safari (WebKit) */
-moz-binding: url('ellipsis.xml#ellipsis'); /* Firefox */
}
</style>
</head>
<body>
<dl>
<dt>體育新聞</dt>
<dd>姚明或將出席球迷簽名會 火箭重返故地拉攏球迷10:58</dd>
<dd>申花恩朗遭足協追加停賽4場01:48 </dd>
<dd>體操世錦賽中國名單公佈 陳一冰領軍鄒凱無緣出征10:52</dd>
<dd>羅雪娟戀情首度曝光 富二代辭職赴美陪讀10:36 </dd>
<dd>廣州亞運競賽全接觸 籌備工作正在按部就班進行09:53 </dd>
<dd>曝馬拉多納密會梅西尋支援 拼死重掌阿根廷教鞭10:25</dd>
<dd>李承鵬:我當足協主席也會貪汙 有些腦殘不懂09-28 15:17 </dd>
</dl>
</body>
</html>
演示效果:
語法:
word-wrop:mormal | break-word
取值簡單說明:
mormal
屬性值表示控制連續文字換行。break-word
屬性值表示內容將在邊界內換行。如果需要,詞內換行(word-break
)也會發生。
換行技術比較分析:
line-break
專門負責控制日文換行,國內使用較少。word-wrap
屬性可以控制換行。當屬性值取值break-word
時,將強制換行,中文和英文文字都沒用任何問題。但是對於長串的英文就不起作用,也就是說,word-wrap:break-word
是控制是否斷刺,而不是斷字元。word-break屬性主要針對亞洲語言和非亞洲語言進行控制換行。當屬性取值break-all時,可以允許非亞洲語言文字行的任意字內斷開;當屬性值是break-all時,表示在中,韓,日文是不允許字斷開的。
white-space屬性具有格式化文字的作用,當屬性取值為nowrap時,表示強制在同一行內顯示所有文字;當屬性值為pre時,表示顯示預定義文字格式。
在IE瀏覽器中,使用word-wrap:break-word;
宣告可以確保所有文字正常顯示。
在Firefox中,中文不會出現任何問題,英文語句也不會出現問題,但是長串英文會出現問題。為了解決長串英文的問題,一般講word-wrap:break-word;和word-break:break-all;宣告結合使用。但是,這種方法會導致普通英文語句中的單詞被斷開顯示(在IE下也是)。
現在的主要問題是長串英文和英文單詞會被斷開。為了解決這個問題,可使用word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;和word-break:break-all;此外,word-wrap:break-word;overflow:auto;在IE下沒有任何問題,但是在Firefox下,長串英文的部分內容就會被遮住。
例項:防止表格標題行換行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>word-wrap</title>
<style type="text/css">
h1 { font-size:16px; }
table {/*色彩恬淡的細表格是設計的主流*/
width:100%;
font-size:12px;
table-layout:fixed;/*定義表格在瀏覽器逐步解析和逐步呈現*/
empty-cells:show;
border-collapse: collapse;
/*上面三行程式碼是設計表格的重要宣告:table-layout:fixed能改變表格呈現效能;empty-cells:show;能夠隱藏不必要的干擾因素;border-collapse:collapse能讓表格看起來更精緻*/
margin:0 auto;
border:1px solid #cad9ea;
color:#666;
/*防止表格標題行換行*/
word-break:keep-all ;/*禁止詞斷開顯示*/
word-wrap:break-word ;/*允許內容頂開指定的容器邊界,如果聲明瞭word-wrap:break-word;則會在IE瀏覽器中出現換行顯示,會破壞整個標題行的樣式*/
white-space: nowrap;/*強迫在一行內顯示*/
}
th {/*使用背景裝飾列表頭可以讓表格看起來更別緻*/
background-image: url(images/th_bg1.gif);
background-repeat:repeat-x;
height:30px;
overflow:hidden;
}
td { height:20px; }/*適當撐起單元格,讓資料看起來更輕鬆*/
td, th {/*淺色線分割資料行和列,會讓表格看起來更清爽,而不是那麼生硬*/
border:1px solid #cad9ea;
padding:0 1em 0;
}
tr:nth-child(even) {/*關鍵:通過結構偽類選擇器為表格偶數行定義背景色,以實現隔行分色的效果*/
background-color:#f5fafe;
}
</style>
</head>
<body>
<h1>避免表格標題行換行顯示</h1>
<table summary="設計優雅的資料表格">
<tr>
<th nowrap="noerap">排名</th>/*新增nowrap="noerap"這一屬性,確保在不同瀏覽器中能夠更好的換行顯示。注意,如果th定義了寬度,該屬性將不再起作用*/
<th nowrap="noerap">校名</th>
<th nowrap="noerap">總得分</th>
<th nowrap="noerap">人才培養總得分</th>
<th nowrap="noerap">研究生培養得分</th>
<th nowrap="noerap">本科生培養得分</th>
<th nowrap="noerap">科學研究總得分</th>
<th nowrap="noerap">自然科學研究得分</th>
<th nowrap="noerap">社會科學研究得分</th>
<th nowrap="noerap">所屬省份</th>
<th nowrap="noerap">分省排名</th>
<th nowrap="noerap">學校型別</th>
</tr>
<tr>
<td>1</td>
<td>清華大學 </td>
<td>296.77</td>
<td>128.92</td>
<td>93.83</td>
<td>35.09</td>
<td>167.85</td>
<td>148.47</td>
<td>19.38</td>
<td width="16">京 </td>
<td width="12">1 </td>
<td>理工 </td>
</tr>
<tr>
<td>2</td>
<td>北京大學 </td>
<td>222.02</td>
<td>102.11</td>
<td>66.08</td>
<td>36.03</td>
<td>119.91</td>
<td>86.78</td>
<td>33.13</td>
<td>京 </td>
<td>2 </td>
<td>綜合 </td>
</tr>
<tr>
<td>3</td>
<td>浙江大學 </td>
<td>205.65</td>
<td>94.67</td>
<td>60.32</td>
<td>34.35</td>
<td>110.97</td>
<td>92.32</td>
<td>18.66</td>
<td>浙 </td>
<td>1</td>
<td>綜合 </td>
</tr>
<tr>
<td>4</td>
<td>上海交大</td>
<td>150.98</td>
<td>67.08</td>
<td>47.13</td>
<td>19.95</td>
<td>83.89</td>
<td>77.49</td>
<td>6.41</td>
<td>滬 </td>
<td>1</td>
<td>綜合 </td>
</tr>
<tr>
<td>5</td>
<td>南京大學</td>
<td>136.49</td>
<td>62.84</td>
<td>40.21</td>
<td>22.63</td>
<td>73.65</td>
<td>53.87</td>
<td>19.78</td>
<td>蘇</td>
<td>1</td>
<td>綜合 </td>
</tr>
<tr>
<td>6</td>
<td>復旦大學 </td>
<td>136.36</td>
<td>63.57</td>
<td>40.26</td>
<td>23.31</td>
<td>72.78</td>
<td>51.47</td>
<td>21.31</td>
<td>滬</td>
<td>2</td>
<td>綜合 </td>
</tr>
<tr>
<td>7</td>
<td>華中科大</td>
<td>110.08</td>
<td>54.76</td>
<td>30.26</td>
<td>24.50</td>
<td>55.32</td>
<td>47.45</td>
<td>7.87</td>
<td>鄂 </td>
<td>1</td>
<td>理工 </td>
</tr>
<tr>
<td>8</td>
<td>武漢大學 </td>
<td>103.82</td>
<td>50.21</td>
<td>29.37</td>
<td>20.84</td>
<td>53.61</td>
<td>36.17</td>
<td>17.44</td>
<td>鄂 </td>
<td>2</td>
<td>綜合</td>
</tr>
<tr>
<td>9</td>
<td>吉林大學 </td>
<td>96.44</td>
<td>48.61</td>
<td>25.74</td>
<td>22.87</td>
<td>47.83</td>
<td>38.13</td>
<td>9.70</td>
<td>吉 </td>
<td>1</td>
<td>綜合</td>
</tr>
<tr>
<td>10</td>
<td>西安交大</td>
<td>92.82</td>
<td>47.22</td>
<td>24.54</td>
<td>22.68</td>
<td>45.60</td>
<td>35.47</td>
<td>10.13</td>
<td>陝</td>
<td>1</td>
<td>綜合</td>
</tr>
</table>
</body>
</html>
演示效果:
換行顯示的表格
防止表格標題換行