用css布局的方法实现如果字符超过一定长度就显示成省略号

以前实现这种效果需要在程序里判断字符的长度,如果长度大于多少个字符,就截取字符,用省略号代替,而且是在服务器处理的,现在只需要用css的属性来操作,简单、实用、节省性能、不用做过多的程序判断、节约开发时间,可谓一举多得。在此分享一下,欢迎交流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-overflow</title>
<style type="text/css">
.test_demo{
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
  width:100px;
  background:#0094ff;
  color:#FFF;
  padding:10px;
  margin:10px;
  border-radius:5px;
}
.test_demo:hover{
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
  width:100px;
  background:#337ab7;
  color:#FFF;
  padding:10px;
  margin:10px;
  border-radius:5px;
}
</style>
</head>
  <body>
    <div class="test_demo">超酷的IT技术学习平台(我是省略号)</div>
  </body>
</html>
上一篇:去除Windows-XP系统下的关机功能


下一篇:PC-如何提高计算机的启动和关机的速度?