立即登录 马上注册
首页 › 开发帮助文档 › 开发技术 › 使用CSS不用程序实现文字自动截断 用省略号代替 ...

赞

评论

收藏

[Html/CSS] 使用CSS不用程序实现文字自动截断 用省略号代替

开发技术 开发技术 发布于：2021-08-03 13:08 | 阅读数：542 | 评论：0

样式：
.test{ 
width:200px; 
height:50px; 
border:1px solid red; 
padding:10px; 
overflow:hidden; /*不显示超过对象宽度的内容*/ 
text-overflow:ellipsis; /*当对象内文本溢出时显示省略标记（...）*/ 
white-space:nowrap; /*限制在一行内显示所有文本*/ 
}
代码：
<html>   <head>   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   <title>www.jb51.net 脚本之家</title>   </head>   <style type="text/css">   div.test{   width:200px;   height:100px;   border:1px solid red;   padding:10px;   overflow:hidden;   text-overflow:ellipsis;   white-space:nowrap;   }   </style>   <body>   <div class="test"><span style="color: rgb(0, 0, 0); font-family: monospace; font-size: medium; white-space: pre-wrap;">CodeAE代码之家-为开发爱好者分享技巧！</span><a href="http://www.codeae.com" style="text-decoration:none">。</a>欢迎大家光临</div>   </body>   </html>
点此可测试代码运行结果  注:引入外部Js需再刷新一下页面才能执行





关注下面的标签，发现更多相似文章
免责声明：

1. 本站所有资源来自网络搜集或用户上传，仅作为参考不担保其准确性！

2. 本站内容仅供学习和交流使用，版权归原作者所有！© 查看更多

3. 如有内容侵害到您，请联系我们尽快删除，邮箱：kf@codeae.com

分享到： QQ好友和群QQ好友和群 QQ空间QQ空间

举报

返回列表
相关帖子
avatar
284 经验
1094 文档
OPNE在线字典
  • 手机版| 免责声明|
2021-2025  版权所有：CodeAE代码之家   
粤ICP备2023096576号-2