代码：
<!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. golang debug with LiteIDE

    golang 的调试比较麻烦,debug stop into 无法跳转到自己写的代码,但是能够跳转到系统提供的代码. 以下是简单的测试代码: package main import ( "f ...

  2. PHPCMS 实现上一篇、下一篇

    方法一:直接调用phpcms系统的函数 <div class="info"> <span>上一篇:<a href="{$previous_p ...

  3. C++中引用（&）的用法和应用实例

    转自:http://www.cnblogs.com/Mr-xu/archive/2012/08/07/2626973.html 对于习惯使用C进行开发的朋友们,在看到c++中出现的&符号,可能 ...

  4. 为什么接口类型可以直接new?

    Runnable rn = new Runnable() { public void run() { } }; 实际相当于,jdk会自动生成一个匿名内部类,完成职责: class Anomymous ...

  5. 类模板Queue的实现

    #include <iostream> #include <vector> using namespace std; template <class Type> c ...

  6. 有关servlet初学者的资源和建议

    四天来学习servlet是很痛苦的经历,其实可以不必要这么痛苦,关键是一定要学会冷静的分析问题与解决问题,要不言学习也没有那么多的乐趣.初学java刚满15天. 首先对于资源来说建议先读一点点的PPT ...

  7. maven会报Could not transfer artifact xxx错误

    需要在你的eclipse更新一下maven的包 如下:

  8. HDU 3461 Code Lock（并查集）

    很好的一个题,思想特别6 题意:给你小写字母个数n,每个字母可以向上翻动,例如:d->c,a->z.然后给你m对数(L,R)(L<=R),表示[L,R]之间可以同时向上翻动,且翻动后 ...

  9. 第一个vs2013控制台程序

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  10. BroadCast,BroadCastReceiver

    效果是:一个MainActivity动态注册一个BroadcastReceiver,BActivity发送一个标准广播,MainActivity接收到广播后,将广播中的消息显示在MainActivit ...