开发中经常会遇见这样的问题，一段文字或者一段标题过长了，就让超出长度的部分益...替换。具体...
开发中经常会遇见这样的问题，一段文字或者一段标题过长了，就让超出长度的部分益...替换。具体怎么做的呢？直接上代码：
<style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 224px; padding: 10px; box-sizing: border-box; border: 1px solid #ebebeb; border-radius: 4px; position: absolute; top: 50px; left: 50px; } .pic{ width: 180px; height: 180px; background: #10a3e8; } .title{ margin-top: 10px; font-size: 14px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; } </style></head><body> <h3 style="margin-left: 50px;margin-top: 20px">鼠标悬停文字上，可显示隐藏文字</h3> <div class="box"> <div class="pic"></div> <p class="title"> <span class="text"></span> </p> </div> <div class="box" style="left: 300px"> <div class="pic"></div> <p class="title"> <span class="text">我是标题我是标题</span> </p>
最重要的熟悉就是上述代码高亮的部分，text-overflow 还有其他的属性，参考这里：http://www.w3school.com.cn/cssref/pr_text-overflow.asp
在加上一段js ,主要作用就是hover的时候，文字会以动画的方式出现，动画方式的css在上面已经写出来。下面的就是简单的js;
$(function(){ $(".title").hover(function(){ var width_a = $(this).width(); var width_b = $(this).find(".text").width(); var indent_px = width_a - width_b; if( width_a <= width_b ){ $(this).css("text-indent",indent_px); } },function(){ $(this).css("text-indent","0"); }); });
text-indent的属性是文字缩紧。以动画的方式文字缩紧，看上去就往左边进去一样。
如有错误之处，敬请批评指出
每日一句：We should accompany the people who we love to go out for a walk in sunny days.
翻译：在阳光明媚的日子里，我们应该陪我们爱的人出去散步。
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
上一篇：QT 打包dll，发布exe记录 下一篇：验证码倒计时
