1. 程式人生 > >《CSS3實戰》筆記--溢位文字省略:text-overflow和文字換行顯示:word-wrop

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

演示效果:

  • 換行顯示的表格
    這裡寫圖片描述

  • 防止表格標題換行
    這裡寫圖片描述