代码：
<!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#值类型与引用类型

    值类型(Value Type),值类型实例通常分配在线程的堆栈(stack)上,并且不包含任何指向实例数据的指针,因为变量本身就包含了其实例数据.其在MSDN的定义为值类型直接包含它们的数据,值类型的 ...

  2. Linux获取当前用户信息函数

    转自:http://net.pku.edu.cn/~yhf/linux_c/function/07.html endgrent(关闭组文件) 相关函数 getgrent,setgrent 表头文件 # ...

  3. Pyqt 屏幕截图工具

    从Pyqt的examples中看到一段截图代码, (路径:examplas\desktop\screenshot.py) 所以想自己UI下界面,手动练习下 通过UI生成的: Screenshot.py ...

  4. CentOS版本选择说明

    官方下载站http://www.centos.org/download/ 所有版本下载地址http://vault.centos.org/ 首先对一些镜像文件做个简单的介绍: LiveCD一般用来修复 ...

  5. SQL Server 2014 BI新特性（二）结合Data Explorer和GeoFlow进行数据分析

    Data Explorer和GeoFlow作为Excel的新功能被写入到即将发布的SQL Server 2014当中.Data Explorer为业务分析人员提供了一种数据获取,整理以及组织的方式,通 ...

  6. 数字信号处理实验（零）—— 一维声音信号处理和二维图像处理

    一.在matlab下声音信号的I/O 1.读wav文件函数 •y = wavread('filename') •[y,Fs,bits] = wavread('filename') •[...] = w ...

  7. 通信原理实践（五）——2PSK 与2DPSK 通信系统

    一.一些Matlab函数 二.2PSK调制解调,性能分析 1.2PSK调制 (1)图示 (2)Matlab代码 function [ s_t ,bb_t,bits] = psk2_module( nS ...

  8. 【项目总结】之——导出Excel

    近来接手的项目,有几个很值得分享的东西.经过自己的不懈实践,总结,分享给大家,希望能对大家的学习有点帮助. 本次探讨的是mvc框架之中的一种导出方法,导出excel. 先让大家看一下啊我们的view界 ...

  9. kylin的安装与配置

    我的环境: Cloudera Hadoop5.3.6 其中, Hadoop版本2.5.0 Hbase版本0.98.6 Hive版本0.13.1 使用的kylin版本:1.5.2.1 下载地址: htt ...

  10. css3易混淆属性详解

    1.background,  background-color,   color (1)background:在一个声明中设置所有属性: 如:background: #00FF00 url(bgima ...