我們常常希望列表中的內容，超過設置的長度的時候，不要撐開父元素，也不希望它直接換行；我們更愿意用div+css設置列表li超出部分顯示省略號。而在title標簽中，置放的是完整的標題。
這樣的方法新手們常常不知道該如何搞定。下面就是方法的演示。不過請注意此方法適用與IE與OP瀏覽器！
設置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.www.reapst.com.cn</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="#">網頁DIV+CSS標準化學習之隱藏文字</a></li>
<li><a href="#">網頁DIV+CSS標準化學習之隱藏文字</a></li>
<li><a href="#">網頁DIV+CSS標準化學習之隱藏文字</a></li>
<li><a href="#">網頁DIV+CSS標準化學習之隱藏文字</a></li>
<li><a href="#">網頁DIV+CSS標準化學習之隱藏文字</a></li>
<li><a href="#">網頁DIV+CSS標準化學習之隱藏文字</a></li>
<li><a href="#">網頁DIV+CSS標準化學習之隱藏文字</a></li>
<li><a href="#">網頁DIV+CSS標準化學習之隱藏文字</a></li>
</ul>
</body>
</html> |
蘇公網安備 32070502010230號