【实用小效果】文字超出隐藏并显示省略号,鼠标悬停时滑动显示全部文字

97646476
97646476 发布于 2017-03-16 14:59:50 浏览:2133 类型:原创 - 教程 分类:HTML/CSS - CSS 二维码: 作者原创 版权保护
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <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>
    </div>
    <script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script>
        $(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");
           });
        });
    </script>
</body>
</html>

喜欢请点击下方 emoticon"给个赞" 支持一下!觉得有用请点击emoticon“收藏”!
【实用小效果】文字超出隐藏并显示省略号,鼠标悬停时滑动显示全部文字
标签:
z
给个赞 26 人点赞
收藏 57 人收藏
评论 已有 7 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
97646476
976464762017-03-16 16:18:012F
你没有仔细看,你说的我在31-33行写了,其他的是为了实现悬停文字的滑动效果 //@fain7:纯CSS 用overflow: hidden; text-overflow: ellipsis; white-space: nowrap;可以实现你这么多代码的功能
举报 支持 (5) 回复 (0)
最新评论
13466829845
134668298452017-03-17 09:01:287F
这个貌似只能显示最后面的内容哦
举报 支持 (0) 回复 (0)
24755668985
247556689852017-03-16 18:29:206F
解决了被隐藏的文字看不到的硬伤,很赞!
举报 支持 (0) 回复 (0)
97646476
976464762017-03-16 18:20:335F
hover文字时还有一个效果!!多出来的代码是为了这个!! //@994399414:你说的很有道理,但是火狐好像不兼容! //@fain7:纯CSS 用overflow: hidden; text-overflow: ellipsis; white-space: nowrap;可以实现你这么多代码的功能
举报 支持 (0) 回复 (0)
994399414
9943994142017-03-16 17:25:184F
你说的很有道理,但是火狐好像不兼容! //@fain7:纯CSS 用overflow: hidden; text-overflow: ellipsis; white-space: nowrap;可以实现你这么多代码的功能
举报 支持 (0) 回复 (1)
1654799829
16547998292017-03-16 16:26:223F
不错,很有用
举报 支持 (0) 回复 (0)
97646476
976464762017-03-16 16:18:012F
你没有仔细看,你说的我在31-33行写了,其他的是为了实现悬停文字的滑动效果 //@fain7:纯CSS 用overflow: hidden; text-overflow: ellipsis; white-space: nowrap;可以实现你这么多代码的功能
举报 支持 (5) 回复 (0)
fain7
fain72017-03-16 15:50:101F
纯CSS 用overflow: hidden; text-overflow: ellipsis; white-space: nowrap;可以实现你这么多代码的功能
举报 支持 (0) 回复 (2)
97646476 97646476 作者

www.webzhaorui.com 专注前端创意体验

作者最新