在做經管系主網頁的同時也在進行著中文系主網頁的構建，果然是只有自己去實踐了，才能遇到各種各樣的問題，然后再去尋找解決這些問題的方法，最后進行修改和不斷的調試，最后達到自己想要的效果。中文系主網頁構建遇到的問題也很多，首先就是遇到了在排版鏈接文字時由于寬度是固定的文字過多造成折行顯示，這種結果是不想要的，還有就是想要多出寬度的文字用省略號代替。 上面的兩個問題都是CSS樣式的應用，先來看不換行文字截斷的CSS樣式： (1)white-space? 屬性設置如何處理元素內的空白。可能取值為：  (2)word-break(該屬性是CSS3新增加的) 屬性規定自動換行的處理方法。可能取值為：  再來看怎么隱藏多余的文字的CSS樣式： (1)overflow? 屬性規定當內容溢出元素框時發生的事情。可能取值為：  (2)text-overflow(CSS3新增屬性) 屬性規定當文本溢出包含元素時發生的事情。可能取值為：  這里要注意的是只有overflow和text-overflow兩個屬性同時使用才會達到多出寬度的文字用省略號代替。 要想達到上述的效果需要對其作用選擇器做到如下屬性設置： ~~~ 選擇器 { display:block;/*行內元素需加*/ word-break:keep-all;/* 不換行，二選一*/ white-space:nowrap;/* 不換行 ，二選一*/ overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */ text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ；需與overflow:hidden;一起使用。*/ } ~~~ 下面就來看中文系主網頁內容模塊一小塊實例： HTML部分代碼： ~~~ <div id="news_left_bottom"> <div class="news_left_title">【學科建設】</div> <div class="news_left_content"> <ul> <li><a href="#" title="我系郭萬青博士獲批2015年度教育部人文社會科學研究規劃基金項目">我系郭萬青博士獲批2015年度教育部人文社會科學研究規劃基金項目</a><span class="time">[2015-12-04]</span></li> <li><a href="#" title="張學鵬教授應邀赴澳門講學">張學鵬教授應邀赴澳門講學</a><span class="time">[2015-12-04]</span></li> <li><a href="#" title="中文系又一部“十二五”國家規劃教材出版">中文系又一部“十二五”國家規劃教材出版</a><span class="time">[2015-12-04]</span></li> <li><a href="#" title="楊立元成為首批中國文藝評論家協會會員">楊立元成為首批中國文藝評論家協會會員</a><span class="time">[2015-12-04]</span></li> <li><a href="#" title="《燕山作家論》出版">《燕山作家論》出版</a><span class="time">[2015-12-04]</span></li> <li><a href="#" title="中文系微電影獲唐山市廉政微電影大賽提名獎">中文系微電影獲唐山市廉政微電影大賽提名獎</a><span class="time">[2015-12-04]</span></li> <li><a href="#" title="我系“語言與文化研究中心”獲批河北省高等學校人文社會科學重點研究培育基地">我系“語言與文化研究中心”獲批河北省高等學校人文社會科學重點研究培育基地</a><span class="time">[2015-12-04]</span></li> <li><a href="#" title="我系郭萬青副教授獲批2014年全國高校古籍整理研究計劃項目">我系郭萬青副教授獲批2014年全國高校古籍整理研究計劃項目</a><span class="time">[2015-12-04]</span></li> </ul> </div> </div> ~~~ 在給出這個作用樣式的選擇器的CSS代碼： ~~~ .news_left_content li a { white-space:nowrap;/* 不換行 */ overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */ text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ；需與overflow:hidden;一起使用。*/ width:350px; display:block; float:left; padding-left:10px; } ~~~ 那么效果是：  需要注意的是，這個CSS樣式只對單行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。