代码：
<!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. C++11的模板新特性-变长参数的模板

    这个特性很赞,直接给例子吧,假如我要设计一个类,CachedFetcher内部可能使用std::map也可能使用std::unordered_map,也可能是其它的map,怎么设计呢?没有C++11变 ...

  2. SQL脚本书写的几点建议

    1.索引很关键,创建合理的索引,提升查询速度:            DBCC FREEPORCCACHE       DBCC DROPCLEANBUFFERS                    ...

  3. sdut 2445 小学数学

    小学数学 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 题目链接:http://acm.sdut.edu.cn/sdutoj/p ...

  4. html5 web database

    html5 web database <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  5. hdu 4741 2013杭州赛区网络赛 dfs ***

    起点忘记录了,一直wa 代码写的很整齐,看着很爽 #include<cstdio> #include<iostream> #include<algorithm> # ...

  6. [Oracle] PL/SQL学习笔记

    -- 1. 使用一个变量 declare -- Local variables here v_name ); begin -- Test statements here select t.user_n ...

  7. 第十七篇：使用窗口的cache属性加速SOUI的渲染

    内容渲染速度是决定一个UI成败的关键.无论UI做得多华丽,没有速度都没有意义. 在MFC,WTL等开发框架下,每个控件都是一个窗口,窗口只需要画前景,背景.因为窗口之间的内容不需要做混合,一个子窗口的 ...

  8. OVER(PARTITION BY)函数用法

    OVER(PARTITION BY)函数介绍 开窗函数               Oracle从8.1.6开始提供分析函数,分析函数用于计算基于组的某种聚合值,它和聚合函数的不同之处是:对于每个组返 ...

  9. JS对Array进行自定制排序

    JS对Array进行自定制排序,简单的做一个记录,代码如下所示: //Test function function myFunction(){ var myArr = new Array(); var ...

  10. 十天来学习java的心得体会

    有关学习java是几天来的心得体会: 十天学习java遇到很多问题,每个问题都是经过反复的看书本以及上网查找资料来解决的,发现这一点真的需要自己来而不是去遇到什么问题就去依靠他人(师兄.同学).在其中 ...