关键字: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. django+xadmin在线教育平台（十六）

    7-7 modelform 提交我要学习咨询1 对应表userask form会对字段先做验证,然后保存到数据库中. 可以看到我们的forms和我们的model中有很多内容是一样的.我们如何让代码重复 ...

  2. php如何将base64数据流文件转换为图片文件?

    2017-03-07 在开发中,自己遇到一个前端在上传图片的时候,使用的base64数据流文件显示的图片. 也就是说 <img src="data:image/jpg;base64,& ...

  3. XPath Helper的安装使用

    XPath Helper的安装使用 xpath helper 是一款chrome浏览器插件,主要用来分析当前网页信息的xpath,在抓取数据时一般会使用到xpath. 安装 下载地址:http://c ...

  4. Java写Excel（不生成实体文件，写为流的形式）

    java 写 Excel(不生成实体文件,写为流的形式) public String exportReportExcel(String mediaCode, List<SimpleMediaRe ...

  5. 用C#实现WEB代理服务器

    用C#实现Web代理服务器 代理服务程序是一种广泛使用的网络应用程序.代理程序的种类非常多,根据协议不同可以分成HTTP代理服务程序.FTP代理服务程序等,而运行代理服务程序的服务器也就相应称为HTT ...

  6. 自定义控件，继承自 ListView

    public class MyListView extends ListView { /** * 如果在xml中创建并设置了style,就会调用三个参数的. * * @param context * ...

  7. 一种简单实用的双向电平转换电路3.3V-5V

    当你使用3.3V的单片机的时候,电平转换就在所难免了,经常会遇到3.3转5V或者5V转3.3V的情况,这里介绍一个简单的电路,他可以实现两个电平的相互转换(注意是相互哦,双向的,不是单向的!).电路十 ...

  8. echarts的pie图中，各区块颜色的调整

    今天在学习使用echarts生成各种图表. 然后在使用pie图时出现我无论怎么更改代码中的颜色,pie图中各块的颜色都十分相近,几乎没法区别块与块之间的区别,如下图: 在下图中,除了其中一块的是红色的 ...

  9. DSP28335的XINTF操作SRAM实验

    1. 本次使用三兄弟的XDS28335开发板,研究一下XINTF操作SRAM的代码.哈弗结构,奇怪,DSP28335是哈弗结构,那么数据和程序空间应该独立的,为啥书上说采用统一的寻址方式?估计只是读写 ...

  10. luogu2387 [NOI2014]魔法森林

    这题和水管局长很像,枚举 \(a\) 的边然后维护关于 \(b\) 的最小生成树就可以了. 1A呐>_< #include <algorithm> #include <i ...