代码：
<!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. Application.ProcessMessages用法

    参考:http://cqujsjcyj.iteye.com/blog/380926 我想你可能还有点模糊.举个例子容易明白:假如你的窗体上有两个按钮,一个“计算”,一个“停止”, 如果你的计算是密集运 ...

  2. jQuery插件treeview点击节点名称不展开、收缩节点 分类： JavaScript 2014-06-16 20:28 539人阅读 评论(0) 收藏

    修改jquery.treeview.js文件中的applyClasses方法(注释掉两行代码): 修改后的applyClasses方法如下: applyClasses: function(settin ...

  3. 虚拟机通过NAT方式与主机、互联网通信

    1.首先配置物理主中机VMnet8的IP信息 主机物理IP为192.168.3.9

  4. 无法启动程序 ”*.lib”

    解决办法: 把含有入口函数(main函数)的 工程 如 cpp-test 设置为启动项 具体操作: 选中 cpp-test 工程 右击 —> 设为启动项目

  5. jBox使用记录

    1.不显示底部按钮,可以将buttons设置为buttons:{} 例:$.jBox.open("iframe:http://www.baidu.com", "百度一下& ...

  6. Java学习随笔5：Java多线程编程

    1. 线程是程序中单独顺序的控制流,线程本身依靠程序进行运行,线程是程序中的顺序控制流,只能使用分配给程序的资源和环境. 2. 进程是执行中的程序,一个进程可以包含一个或多个线程,但至少要包含一个线程 ...

  7. 如何hash一条有向边

    之前这个问题还困扰了我好久,但是现在我才明白这个很蠢的问题 那就是(3,7)(4,9)(3,3)这种有向序点对(括号可能用的不对) 我们可以变成对"(3,7)"字符串的hash,当 ...

  8. LoadRunner 事务函数

    status 包括LR_PASS, LR_FAIL,  LR_AUTO,  LR_STOP(这个没用过) lr_set_transaction_instance_status(status); 可以根 ...

  9. Blog Starting...

    30出头,开始Blog记录学习生活的点滴,待40时再回来一看.

  10. hdu5092 dp（递推）

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=5092 题意:给一个m*n的矩阵,找到一个纵向的"线"使得线上的和最小并 ...