我們常常希望列表中的內(nèi)容,超過設(shè)置的長度的時候,不要撐開父元素,也不希望它直接換行;我們更愿意用div+css設(shè)置列表li超出部分顯示省略號。而在title標簽中,置放的是完整的標題。
這樣的方法新手們常常不知道該如何搞定。下面就是方法的演示。不過請注意此方法適用與IE與OP瀏覽器!
設(shè)置li超出部分顯示省略號的方法
以下是引用片段:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.qinglibike.com</title> <style type="text/css"> <!-- li {width:150px;white-space:nowrap;text-overflow:ellipsis;overflow: hidden;} body,td,th {font-family: 宋體;} --> </style> </head> <body> <ul> <li><a href="#">網(wǎng)頁DIV+CSS標準化學(xué)習(xí)之隱藏文字</a></li> <li><a href="#">網(wǎng)頁DIV+CSS標準化學(xué)習(xí)之隱藏文字</a></li> <li><a href="#">網(wǎng)頁DIV+CSS標準化學(xué)習(xí)之隱藏文字</a></li> <li><a href="#">網(wǎng)頁DIV+CSS標準化學(xué)習(xí)之隱藏文字</a></li> <li><a href="#">網(wǎng)頁DIV+CSS標準化學(xué)習(xí)之隱藏文字</a></li> <li><a href="#">網(wǎng)頁DIV+CSS標準化學(xué)習(xí)之隱藏文字</a></li> <li><a href="#">網(wǎng)頁DIV+CSS標準化學(xué)習(xí)之隱藏文字</a></li> <li><a href="#">網(wǎng)頁DIV+CSS標準化學(xué)習(xí)之隱藏文字</a></li> </ul> </body> </html> |