代码：
<!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. MVC - 17.OA项目

          1.分层   2.项目依赖关系 MODEL IDAL -> MODEL DAL -> IDAL,MODEL,EntityFramewrok(注意和MODEL里的版本要一致),S ...

  2. Linux下Vi/Vim使用笔记

    启动和关闭vim vi 打开 Vi/Vim 打开 Vi/Vim 并加载文件 <file> vi <file> vim编辑器的三种模式:一般模式.编辑模式和命令行模式在一般模式中 ...

  3. SQL链表查询 数据库为空

    查询出数据为空,解决方案:链表 对应字段长度不一致.

  4. poj 2503:Babelfish（字典树，经典题，字典翻译）

    Babelfish Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 30816   Accepted: 13283 Descr ...

  5. hdu 4007 暴力or线段树 ***

    尼玛,INF不能定义太大,找标程对拍了好久 #include<cstdio> #include<iostream> #include<algorithm> #inc ...

  6. java发展史与java的语言特性

    概述: Java 体系比较庞杂,功能繁多,这也导致很多人在自学 Java 的时候总是感觉无法建立 全面的知识体系, 无法从整体上把握Java 的原因. 在这里我们先简单了解一下Java 的版本. 具体 ...

  7. Element selector doesn't have required

    这个错误是因为创建xml文件时文件类型弄成了layout xml file ,这样就会自动到layout文件夹下 应该是drawable resource file

  8. 用eclipse开发和调试postgresql-8.4.1

    按照书本<PostgreSQL数据库内核分析>根据第一章讲解的linux下,编译 安装:不同的是libreadline5-dev版本没有了,就用新的版本代替:我的ubuntu 14 所以必 ...

  9. 【转】清理Kylin的中间存储数据(HDFS & HBase Tables)

    http://blog.csdn.net/jiangshouzhuang/article/details/51290399 Kylin在创建cube过程中会在HDFS上生成中间数据.另外,当我们对cu ...

  10. LR通过snmp监控linux下的mysql

    LR通过snmp监控linux下的mysql 在linux底下安装配置snmp: 1.使用系统盘安装rpm包(这种方式最好) 2.在www.net-snmp.org处下载net-snmp安装(安装后有 ...