代码：
<!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. python中的monkey-patching

    这个技巧我很少用过. 但知道无防. 在运行时改变函数或类的行为, 一般用猴子补丁,原类,装饰器都可以实现. #!/usr/bin/env python # -*- coding: utf-8 -*- ...

  2. 无废话ExtJs 入门教程九[数字字段：NumberField、隐藏字段Hidden、日期字段：DataFiedl]

    无废话ExtJs 入门教程九[数字字段:NumberField.隐藏字段Hidden.日期字段:DataFiedl] extjs技术交流,欢迎加群(201926085) 继上第六节内容,我们在表单里加 ...

  3. xml解析方法总结

    ==========================================xml文件<?xml version=”1.0″ encoding=”GB2312″?> <RES ...

  4. PostgreSQL简单介绍

    自从MySQL被Oracle收购以后,PostgreSQL逐渐成为开源关系型数据库的首选. 本文介绍PostgreSQL的安装和基本用法,供初次使用者上手.以下内容基于Debian操作系统,其他操作系 ...

  5. ThinkPHP3.2判断手机端访问并设置默认访问模块的方法

    ThinkPHP3.2判断是否为手机端访问并跳转到另一个模块的方法 目录结构 公共模块Common,Home模块,Mobile模块 配置Application/Common/Conf/config.p ...

  6. 关于phpcms v9投票模块选项排序listorder设定问题

    关于phpcms v9投票模块选项排序listorder设定问题修改,主要修改了三个文件三处地方. 主要修改三个文件: .phpcms\modules\vote\templates\vote_edit ...

  7. zTree v3.5配置

    页面 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ZTree3.aspx ...

  8. VS2010 水晶报表的使用

    在VS2010中新建一个“Windows 窗体应用程序”项目,在该项目中添加一个水晶报表“CrystalReport1.rpt”,然后在项目上点击鼠标右键属性,将“目标框架”改为“.Net Frame ...

  9. hpunix下11gRac的安装

    一.检查环境 1.操作系统版本# uname -a 2.补丁包三大补丁包#swlist -l bundle|grep QPKAPPS#swlist -l bundle|grep QPKBASE#swl ...

  10. Java Thread join() 的用法

    Java Thread中, join() 方法主要是让调用改方法的thread完成run方法里面的东西后, 在执行join()方法后面的代码.示例: class ThreadTesterA imple ...