css效果文字多了就...

时间：2023-03-09 13:00:51
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.

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

相关文章