代码：
<!DOCTYPE html>

<html>

<head>

<style>

div.test

{

white-space:nowrap;

width:12em;

overflow:hidden;

border:1px solid #000000;

}

div.test:hover

{

text-overflow:inherit;

overflow:visible;

}

</style>

</head>

<body>

<p>如果您把光标移动到下面两个 div 上，就能够看到全部文本。</p>

<p>这个 div 使用 "text-overflow:ellipsis" ：</p>

<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>

<p>这个 div 使用 "text-overflow:clip"：</p>

<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>

</body>

</html>

代码运行结果：

当鼠标移入地时候可以显示被省略的内容

带有hover效果的text-overflow的更多相关文章

  1. css3 hover效果

    html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. ListView 实现带有Filpper效果的左右滑动删除 Item

    ListView 实现带有Filpper效果的左右滑动删除 Item  的实现最基本的方法还是 对 Listview 的继承重写 .然后是在删除过程中加入 TranslateAnimation 滑动事 ...

  3. Swift 带有动画效果的TabBarItem

    额...貌似挺长时间没有总结新知识了,最近在看swift,之前swift刚出来的时候大体看了一遍,后来时间长了没看加之swift2.0做了比较大的调整,公司项目也不是用swift写的,也就没怎么看了, ...

  4. 【Android】Android开发实现带有反弹效果，仿IOS反弹scrollview详解教程

    作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://weibo.com/mcxiaobing 首先给大家看一下我们今天这个最终实现 ...

  5. Web页面中5种超酷的Hover效果

    hover 效果能给网页增加一些动态效果,并且使得站点更具有活力.原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器 的支持,我们可以用纯粹的CSS代码来实现这 ...

  6. 手机网页中的hover效果实现

    js文件 function mouseout(obj) { var className ="hover"; var _ecname = obj.className; if (_ec ...

  7. 【1】Hover 效果收集

    各种 hover 效果  github repository>>  git 仓库 1. 背景图的 hover 效果 原页面>> githubSite>>

  8. 【特效】体验很好的导航hover效果移出恢复当前位置

    很常见的一种导航的hover效果,鼠标放上后除了正常的hover,在移出整个导航后,会恢复当前栏目的特殊样式,分别有横向和纵向的导航.代码也比较简单,设置一个当前栏目的class,用index()找到 ...

  9. elment重置表格行高，hover效果

    来源网络,做个笔记.表头行高.el-table__header tr, .el-table__header th { padding: 0; height: 50px; }表体行高 .el-table ...

随机推荐

  1. （转）ORA-12519: TNS:no appropriate service handler found 的问题处理。

    很多时候出现:ORA-12519: TNS:no appropriate service handler found 都是由于当前的连接数已经超出他能够处理的最大值了. 处理方法如下:摘自网上. se ...

  2. Android Matrix

    转自 :http://www.cnblogs.com/qiengo/archive/2012/06/30/2570874.html#code Matrix的数学原理 平移变换 旋转变换 缩放变换 错切 ...

  3. poj 2262【素数表的应用---判断素数】【哈希】

    Goldbach's Conjecture Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 35214   Accepted: ...

  4. 基于MyEclipse6.5的ssh整合

    1．编写目的 为了学习,为了更好的学习java. 为了让想要学习这个整合的人少走弯路! ! ! 2．实验环境 l MyEclipse6.5 l JBoss4.2.1 l SQL2005 l 数据库脚本 ...

  5. 浅谈config文件的使用

    一.缘起 最近做项目开始使用C#,因为以前一直使用的是C++,因此面向对象思想方面的知识还是比较全面的,反而是因没有经过完整.系统的.Net方面知识的系统学习,经常被一些在C#老鸟眼里几乎是常识的小知 ...

  6. oracle删除用户下所有的表

    需要创建这些删除语句,通过oracle的数据字典找到该用户下的所有表.视图等对象,拼接成语句.如下select 'drop table '||table_name|| ' cascade constr ...

  7. ThinkPHP的field方法的用法总结

    ThinkPHP的连贯操作方法中field方法有很多的使用技巧,field方法主要目的是标识要返回或者操作的字段,下面详细道来. .用于查询 在查询操作中field方法是使用最频繁的. $Model- ...

  8. [Outlook] Outlook2013能收但无法发送邮件-0x800CCC13, 0x800CCC0B, 0x8004210B

    [20140704更新],在公司收邮件的时候,问题再次出现,错误码:0x800ccc13,按照以下方法测试成功: 1. 按照以前办法,反复重启,失败 2. 按照以下参考连接A中的步骤 a. Click ...

  9. Android学习网站推荐（转）

    收集了一些比较好的Android学习网站,希望对大家有所帮助: 1.http://developer.android.com/ Android官方网站,可惜被屏蔽了,需要使用FQ软件 2.http:/ ...

  10. Codeforces Testing Round #12 C. Subsequences 树状数组

    C. Subsequences     For the given sequence with n different elements find the number of increasing s ...