css效果文字多了就...

　　开发中经常会遇见这样的问题，一段文字或者一段标题过长了，就让超出长度的部分益...替换。具体怎么做的呢？直接上代码：

    

 <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.

翻译：在阳光明媚的日子里，我们应该陪我们爱的人出去散步。

posted @ 2017-03-17 21:22  adouwt  阅读(402)  评论(0)  编辑  收藏  举报