超出一定字数的文章用省略号代替隐藏省略文字

admin · 发表于 2014-4-24 09:16:26

您需要登录才可以下载或查看，没有账号？立即注册

x

超出一定字数的文章用省略号代替隐藏省略文字，下面的案例可以实现：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style type="text/css">
div,ul,li{padding:0;margin:0;}
ul,li{list-style: none;}
a{color:#000;text-decoration:none;outline:none;}
a:hover {color:#f00; text-decoration:none;}
.right li{
width:180px;/*不允许出现半汉字截断*/
height:22px;
line-height:22px;
overflow:hidden;/*自动隐藏文字*/
white-space:nowrap;/*强制不换行*/
text-overflow:ellipsis;/*文字隐藏后添加省略号*/
}
</style>
</head>
<body>
<div class="right">
<ul>
<li><a href="">关于中欧清洁案达成价格承诺关于中欧清洁案达成价格承诺关于中欧清洁案达成价格承诺关于中欧清洁案达成价格承诺关于中欧清洁案达成价格承诺关于中欧清洁案达成价格承诺</a></li>
<li><a href="">关于邀请加入中国</a></li>
<li><a href="">012-2013年中国清洁产业年度报</a></li>
<li><a href="">011-2012年中国清洁产业发展</a></li>
<li><a href="">我是演示文字，一切跟我没关系的~~~~我是演示文字，一切跟我没关系的~~~~我是演示文字，一切跟我没关系的~~~~</a></li>
</ul>
</div>
</body>
</html>

复制代码

演示图：

其他扩展具体的实现请自行领悟。

		自动登录	找回密码
密码			立即注册

[HTML/CSS] 超出一定字数的文章用省略号代替隐藏省略文字