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

最新推荐文章于 2023-02-06 11:38:35 发布

abel18444180020

最新推荐文章于 2023-02-06 11:38:35 发布

阅读量346

点赞数

原文链接：http://www.cnblogs.com/kdkler/p/4424698.html

版权

以前实现这种效果需要在程序里判断字符的长度,如果长度大于多少个字符,就截取字符,用省略号代替,而且是在服务器处理的,现在只需要用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>

转载于:https://www.cnblogs.com/kdkler/p/4424698.html

abel18444180020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用css布局的方法实现如果字符超过一定长度就显示成省略号

以前实现这种效果需要在程序里判断字符的长度,如果长度大于多少个字符,就截取字符,用省略号代替,而且是在服务器处理的,现在只需要用css的属性来操作,简单、实用、节省性能、不用做过多的程序判断、节约开发时间，可谓一举多得。在此分享一下，欢迎交流<!DOCTYPE html><html><head> <meta charset="...
复制链接

扫一扫