<!DOCTYPE html>

<html>

<head>

<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />

<meta http-equiv="Content-Type" content="text/html; charset=GBK" />

<title>文本相关属性设置</title>

<style type="text/css">

/* 为div元素增加边框 */

div{

border:1px solid #000000;

height: 30px;

width: 200px;

}

</style>

</head>

<body>

text-overflow:ellipsis <tr><td style="overflow:hidden;white-space:nowrap

;text-overflow:ellipsis;"title="测试文字测试文字测试文字测试文字测试文字测试文字">测试文字测试文字测试文字测试文字测试文字测试文字</td></tr>

</body>

</html>

<!DOCTYPE html><html><head><meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title>文本相关属性设置</title><style type="text/css">/* 为div元素增加边框 */div{border:1px solid #000000;height: 30px;width: 200px;}</style></head><body><!-- 缩进20pt -->text-indent:20pt <div style="text-indent:20pt">测试文字</div><!-- 缩进20pt -->text-indent:40pt <div style="text-indent:40pt">测试文字</div><!-- 居中对齐 -->text-align:center <div style="text-align:center">测试文字</div><!-- 居右对齐 -->text-align:right <div style="text-align:right">测试文字</div><!-- 文本从右边流入 -->direction:rtl <div style="direction:rtl">测试文字</div><!-- 文本从左边流入 -->direction:ltr <div style="direction:ltr">测试文字</div><!-- 强制不换行，直到遇到br标签 -->white-space:nowrap <div style="white-space:nowrap">测试文字,疯狂Java讲义，疯狂XML讲义</div><!-- 当文字溢出时，只是简单地裁切 -->text-overflow:clip <div style="overflow:hidden;white-space:nowrap;text-overflow:clip;">测试文字测试文字测试文字测试文字测试文字测试文字</div><!-- 当文字溢出时，裁切之后显示裁切标记 -->text-overflow:ellipsis <div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">测试文字测试文字测试文字测试文字测试文字测试文字</div>text-overflow:ellipsis <tr><td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:200px;">测试文字测试文字测试文字测试文字测试文字测试文字</td></tr></body></html>

用CSS做长度超过长度显示‘...’，当鼠标放上时显示全部内容的更多相关文章

  1. 鼠标放上时显示隐藏的div或者其他代码的“jquery”的三种写法和“JavaScript”的一种写法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 鼠标移上显示的下拉菜单，和鼠标移上时显示的导航，html，JavaScript代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. css 鼠标移动到按钮图片改变；图片换层；鼠标放上透明度改变直到隐藏；

    css 鼠标移动到按钮图片改变: 方法一: <style> .pp a { width:575px; height:157px; background:url(1.jpg);/*图片地址* ...

  4. DIV内容超出长度显示省略号，鼠标移上自动显示全部内容（EasyUI DataGrid）

    如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...

  5. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  6. VC/MFC 当鼠标移到控件上时显示提示信息

    VC/MFC 当鼠标移到控件上时显示提示信息 ToolTip是Win32中一个通用控件,MFC中为其生成了一个类CToolTipCtrl,总的说来其使用方法是较简单的,下面讲一下它的一般用法和高级用法 ...

  7. C# chart，有关如何在鼠标移动到Series上时显示节点及数据 （有待继续更新）

    一.效果与思路 效果: 解决方案1 用chart的mousemove时间,实时跟踪鼠标最近的X轴的位置,然后把cursorX设置到那个位置上,让用户知道我是选的那一个X的值,同时用tooltip显示该 ...

  8. 解决sencha touch显示.JSON包含中文数据时显示乱码问题

    按照ST官方示例navigationview做的一个示例.数据源是一个.json文件.但是显示的时候如果.json文件里有中文则乱码.我知道是编码问题,但是不知道怎么改,如何改. 问了N个人最后解决方 ...

  9. 动态创建div（鼠标放上显示二维码）

    最近的微信大行其道.各个网站上都给出的微信验证码,进行手机扫描加入. 怎么创建类似与点击鼠标弹出一个浮动的div显示二维码的这种效果. 1.首先制作好这样的图片,写css样式 <style ty ...

随机推荐

  1. [译]OpenStack Object Storage Monitoring

    注:翻译的不完整,主要是有些地方翻译后反而妨碍理解,有些不知道怎么翻,anyway,需要时拿来用用也是可行的,顺便共享啦.欢迎提意见. 一个OpenStack Object Storage(OSOS) ...

  2. TYVJ1288 飘飘乎居士取能量块 -SilverN

    描述   9月21日,今天是pink的生日,飘飘乎居士当然要去别人的领土大闹一番啦!  为了收集更多的能量到pink家大闹,飘飘乎居士准备从后花园中取出自己多年积攒的p个能量块.后花园一共被划分n个地 ...

  3. CEPH块设备创建及快照

    1.创建image rbd create foo --size 1024 {--image-format 2}//创建一个名为foo的image,大小为1024M,当需要克隆快照时,需要添加大括号中的 ...

  4. C++ 之 常量成员函数

    类的常量成员函数 (const member function), 可以读取类的数据成员,但是不能修改. 1  声明 1.1  const 关键字 在参数列表后,加 const 关键字,声明为常量成员 ...

  5. 如何用ZBrush确定头部五官的位置

    之前和大家讲过如何在ZBrush中确定头部雕刻,在第一阶段中面数很少,只能将大型体雕刻出来,由于面数太少不能进行下面的雕刻.接下来第二阶段的调整,需要重新分布模型表面的网格,增加面数,进行五官的位置的 ...

  6. 孙鑫视频学习：改变窗口过程函数中出现error C2440错误的解决方法

    在Visual Studio 2010中,即使代码是完完全全按照孙鑫视频中的敲,也会在出现error C2440,这是因为开发平台由VC6.0升级至VS2010,需要将原有的项目迁移.VS2010对消 ...

  7. jquery中的clone()方法使用

    clone([Even[,deepEven]]) 描述: 克隆匹配的DOM元素并且选中这些克隆的副本. 在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用. 1:一个布尔值(true 或者 ...

  8. 关于comparable与comparator的用法（即自定义集合框架用法 ）

    package javastudy; import java.util.Comparator; import java.util.Iterator; import java.util.TreeSet; ...

  9. Linux安装、卸载软件

    在linux环境中,尤其是cenos中安装过一些软件,一般是二进制安装与源码安装,现小结一下linux中的安装与卸载. 一.通常Linux应用软件的安装包有三种: 1) tar包,如software- ...

  10. [原创] NetBean开发c++程序指南1- 加入c++项目文件夹

    利用 NetBean开发c/c++程序,导入原有程序代码. 1. 在菜单栏的 "工具" -> 选项 -> c/c++开发 如果彩色就是激活的状态,否则选择激活. 2. ...