我們常常希望列表中的內(nèi)容,超過(guò)設(shè)置的長(zhǎng)度的時(shí)候,不要撐開(kāi)父元素,也不希望它直接換行;我們更愿意用div+css設(shè)置列表li超出部分顯示省略號(hào)。而在title標(biāo)簽中,置放的是完整的標(biāo)題。
這樣的方法新手們常常不知道該如何搞定。下面就是方法的演示。不過(guò)請(qǐng)注意此方法適用與IE與OP瀏覽器!
設(shè)置li超出部分顯示省略號(hào)的方法
以下是引用片段:
<!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>m.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)頁(yè)DIV+CSS標(biāo)準(zhǔn)化學(xué)習(xí)之隱藏文字</a></li> <li><a href="#">網(wǎng)頁(yè)DIV+CSS標(biāo)準(zhǔn)化學(xué)習(xí)之隱藏文字</a></li> <li><a href="#">網(wǎng)頁(yè)DIV+CSS標(biāo)準(zhǔn)化學(xué)習(xí)之隱藏文字</a></li> <li><a href="#">網(wǎng)頁(yè)DIV+CSS標(biāo)準(zhǔn)化學(xué)習(xí)之隱藏文字</a></li> <li><a href="#">網(wǎng)頁(yè)DIV+CSS標(biāo)準(zhǔn)化學(xué)習(xí)之隱藏文字</a></li> <li><a href="#">網(wǎng)頁(yè)DIV+CSS標(biāo)準(zhǔn)化學(xué)習(xí)之隱藏文字</a></li> <li><a href="#">網(wǎng)頁(yè)DIV+CSS標(biāo)準(zhǔn)化學(xué)習(xí)之隱藏文字</a></li> <li><a href="#">網(wǎng)頁(yè)DIV+CSS標(biāo)準(zhǔn)化學(xué)習(xí)之隱藏文字</a></li> </ul> </body> </html> |