新聞列表中，經常使用的文字超出後顯示省略號..

時間 2019-11-17

標籤列表經常使用文字超出顯示省略號简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本超出後顯示省略號...</title>
<style type="text/css">
ul li{list-style-type: none;}
a{color: #000000;text-decoration: none;}
a:hover{color: #999999;}
li {
width:200px;
white-space:nowrap; /*強制在同一行內顯示全部文本，合併文本間的多餘空白，直到文本結束或者遭遇br對象。 */
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-webkit-text-overflow:ellipsis;
-moz-text-overflow:ellipsis;
overflow: hidden;
}
/* firefox only wtf is? pls let me know*/
li:not(li) {
clear: both;
}
li:not(li) a {
max-width: 175px;
float: left;
}
li:not(li):after {
content: "...";
float: left;
width: 25px;
padding-left: 5px;
color: #df3a0e;
}

</style>
</head>
<body>
<div class="nwes">
<ul>
<li><a href="">這裏是新聞標題，今天晚上會下雨</a></li>
<li><a href="">這裏是新聞標題，今天晚上會下雨</a></li>
<li><a href="">這裏是新聞標題，今天晚上會下雨</a></li>
<li><a href="">這裏是新聞標題，今天晚上會下雨</a></li>
<li><a href="">這裏是新聞標題，今天晚上會下雨</a></li>
<li><a href="">這裏是新聞標題，今天晚上會下雨</a></li>
<li><a href="">這裏是新聞標題，今天晚上會下雨</a></li>
<li><a href="">這裏是新聞標題，今天晚上會下雨</a></li>
<li><a href="">這裏是新聞標題，今天晚上會下雨</a></li>
<li><a href="">這裏是新聞標題，今天晚上會下雨</a></li>
</ul>
</div>
</body>
</html>css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。