关键字:text-overflow:ellipsis

语法:text-overflow:clip | ellipsis

取值

clip:默认值.不显示省略标记(...)，而是简单的裁切.

ellipsis: 当对象内文本溢出时显示省略标记(...).

可惜text-overflow 还只是ie的私有属性而已，也没被收录到w3c标准里.

如果想让某个容器（div或者li或者...块级元素）显示一行文字，当文字内容过多时，不换行，而是出现...

这样写：例如

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

     <html xmlns="http://www.w3.org/1999/xhtml">

     <head>

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

     <title></title>

     <style type="text/css">

     #box{width:100px;background-color:#87CEEB;padding:2px 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

     </style>

     </head>

     <body>

     <div id="box">我是小灰灰.我是小灰灰.我是小灰灰.我是小灰灰.我是小灰灰.</div>

     </body>

     </html>

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMMAAABACAIAAAAoOVSLAAACHUlEQVR4nO2X3XEDIQwGqTntuJPU4SrSBHnLHH9Cgm8uN2b3IWPLChBpI3MpAyhI/30A+BAwCTRgEmjAJNCASaABk0ADJoGGvkkJNri5hQ9haNLN5/gYji0dJok5tnSYJObY0mGSmGNLt27SQsmEy4Z2v7O7mFRGB+W4Pp5cf9rJoUebHZOMYy9vFAWTymhZjq4Hf6/9/duZSaGH8FCyFkwqow45PCYtdG5nJkmSN8GkMjqeSf5/7jZoVLnyctqPqcfLyZtgUhmNzKTh0pGZ1DbbXr+bNj126PxrYFIZVXy7Dbc0Z5XfjGp62aPRmbwPJpVR97NbbnrvZLSX/fYa7CqymbwPJpXRQf9aAza/B+351I08WaMb1n8sLg/aOdSmeVaoBpIxb4yl2o88Nk+TVWBSGfVNGrvHtjHDA7kHmD32QslCMKmMzq66rSXdVi2MgdCAGUVCyTnn/H6llF7vy7uv7x/zdfT8H4/XJMOJ6iNjOE2O4tbOsM1z8eokY9I2sRv3cJXBRapKaK9K/i2qjTy/HkpWgUll9NRy7HNs6TBJzLGlwyQxx5YOk8QcWzrvBRn83NzCh3Donw1yMAk0YBJowCTQgEmgAZNAAyaBBkwCDZgEGjAJNGASaMAk0IBJoAGTQAMmgQZMAg2YBBowCTRgEmjAJNCASaABk0ADJoEGTAINmAQaMAk0YBJowCTQgEmgAZNAAyaBBkwCDb/t05j+9vGJFAAAAABJRU5ErkJggg==" alt="" />

注意：overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用.

1.一定要给容器定义宽度.

2.如果少了overflow: hidden;文字会横向撑到容易的外面

3.如果少了white-space:nowrap;文字会把容器的高度往下撑；即使你定义了高度，省略号也不会出现，多余的文字会被裁切掉

4.如果少了text-overflow:ellipsis;多余的文字会被裁切掉，就相当于你这样定义text-overflow:clip.

如果容器是table，当文字内容过多时，不换行，而是出现...

这样写：例如:

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

     <html xmlns="http://www.w3.org/1999/xhtml">

     <head>

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

     <title></title>

     <style type="text/css">

     table{table-layout:fixed;width:106px;}

     td{padding:2px 3px;border:1px solid #000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

     </style>

     </head>

     <body>

     <table cellspacing="0" cellpadding="0"><tr><td>我是小灰灰.我是小灰灰.我是小灰灰.我是小灰灰.我是小灰灰.</td></tr></table></body>

     </html>

注意：

1.一定要给table定义table-layout:fixed;只有定义了表格的布局算法为fixed，下面td的定义才能起作用。

text-overflow使用文字超多div的宽度或超过在table中<td>的更多相关文章

  1. table中td文字超出长度用省略号隐藏超出内容，鼠标点击内容全部显示

    1,设置css样式 <style>table {width: 100%;float: left;table-layout:fixed;width:600px;border:1px soli ...

  2. table中td的宽度不随文字变宽

    1.设置了table的宽度后,宽度仍然不固定,td的内容一多,很容易吧table撑变形.有些时候我们需要设置固定的宽度. 解决办法 table的css 加入样式  table-layout:fixed ...

  3. table中td 内容超长 自动折行 （含字母数字文字）

    <table style="width:100%;table-layout:fixed;"> //列宽由表格宽度和列宽度设定 <thead> <th& ...

  4. 调用jquery的resize方法改变div的宽度和高度在IE中不变，在谷歌中可以正常显示

    1.jquery代码: 1.1问题的版本: $(function() { haituheight(); $(window).resize(function(){ haituheight(); }); ...

  5. jquery 判断文字是否超出div出现三个点的省略号

    现在有个需求,就是一个div宽度固定,但是文字可能会超出,超出出现三个点省略,然后鼠标划入的时候显示全部,不超出鼠标划入就不显示,这就意味着要判断文字是否超出了 参考代码 <html lang= ...

  6. 超简单集成HMS ML Kit文字超分能力，一键提升文本分辨率

    前言 大家有没有遇到过这种情况,在浏览微博或者公众号时看到一段有趣的文字,于是截图发到朋友圈想和好友分享.但是在发布图片时,软件会对图片强制进行压缩,导致图片分辨率下降,文字变得模糊难以阅读.那么有没 ...

  7. C# Windows Phone 8 WP8 , 文字超连结到网页 免打程式码，Xaml就搞定 ! !

    原文:C# Windows Phone 8 WP8 , 文字超连结到网页 免打程式码,Xaml就搞定 ! ! 一般我们在开发Windows Phone 8 APP ,有时会需要超连结连到其他的网页,但 ...

  8. css文字样式与div

    文字与图片 如果要要将字移动到图片的上方,这里就需要定位一下,设置div为父级,为相对定位:设置h1为绝对定位: div{position:relative;} h1{font-size:16px;c ...

  9. 使用html及CSS实现在table中文字信息超过5个隐藏，鼠标移到时弹窗显示全部：

    使用html及CSS实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部: <!DOCTYPE html><html lang="en">< ...

随机推荐

  1. MySQL快速生成连续整数

    很多时候需要用到连续的id进行数据对比,如判断是否连续等问题.那么,生成连续整数的方式有多种,首先容易想到的是逐步循环,如果想生成1kw条记录,则需要循环1kw次进行插入,那么有没有其他方式呢,效率相 ...

  2. canvas实现半圆环形进度条

    html部分 <canvas id="canvas" width="150" height="150"> <p>抱歉 ...

  3. 洛谷 T51922 父子

    题目描述 对于全国各大大学的男生寝室,总是有各种混乱的父子关系. 那么假设现在我们一个男生寝室有不同的 nn 个人,每个人都至多有一个“爸爸”,可以有多个“儿子”,且有且只有一个人没有“爸爸”(毕竟是 ...

  4. STL——泛型编程

    1.指针的算术运算 对于一个存储int数据的vector,我们要查找某值是否存在于其中,采用下标操作的做法如下: int* find(const vector<int> &vec, ...

  5. Matplotlib 基本图表的绘制

    图表类别:线形图.柱状图.密度图,以横纵坐标两个维度为主 同时可延展出多种其他图表样式 plt.plot(kind='line', ax=None, figsize=None, use_index=T ...

  6. node session会话

    会话机制: 浏览器-->服务器 浏览器<--服务器 (产生一个会话id,保存在cookie中) 浏览器-->服务器(服务器根据会话id关联到相应数据信息体data) var expr ...

  7. AVL重平衡细节——插入

    话说这个系列鸽了好久,之前在准备语言考试,就没管博客了,现在暑假咱们继续上路! 每当我们进行一次插入之后,整棵AVL树的平衡性就有可能发生改变,为了控制整棵树的高度,我们需要通过一系列变换(重平衡)来 ...

  8. MongoDB从环境搭建到代码编程（Window 环境）

    本人开发环境: window Server 2008 , 64位系统 服务端 MongoDB下载地址:http://www.mongodb.org/downloads  (本人己下好的在百度网盘 : ...

  9. RedHat6.4 安装yum源

    主要参考: http://blog.itpub.net/25313300/viewspace-708509/ http://blog.sina.com.cn/s/blog_50f908410101ct ...

  10. 洛谷P1364 医院设置

    LITTLESUN的第一道图论,撒花~~ 题目链接 这道题是Floyd的板子题 注意对于矩阵图的初始值赋值要全部赋值成最大值 十六进制的最大值表示方式是0x3f3f3f3f memset(G,0x3f ...