关键字: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. jQuery-qrcode.js 生成带Logo 的二维码

    引入文件  jQuery-qrcode.js 地址:https://blog-static.cnblogs.com/files/kitty-blog/jquery-qrcode.js https:// ...

  2. 【c学习-7】

    #include /*#include"test31.c"*/ //定义阶乘函数 /* int fac(int n){ //定义寄存器存储变量 register int i ,f= ...

  3. 记一次MD5妙用

    记一次MD5妙用 最近项目组中在做历史记录的改造工作,主持讨论了多次,但每次讨论完都觉的很完美了,但实际在写这部分逻辑的时候还是会发现一些问题出来,很难受,反反复复的暴露智商是硬伤,人艰不拆,暂先不扯 ...

  4. poj2230 欧拉回路

    http://poj.org/problem?id=2230 Description Bessie's been appointed the new watch-cow for the farm. E ...

  5. 【Java】关于Spring框架的总结 （二）

    上文提到了 Spring 的 IoC 特性和 AOP 特性,只提到个别的实现方法.本文将对 IoC 和 AOP 其他方法进行讲解. 多种方式实现依赖注入 1.设值注入 上文中使用的注入方法:通过 se ...

  6. AOP原理？？

    面向切面编程,在我们的应用中,经常需要做一些事情,但是这些事情与核心业务无关,比如,事务.日志.权限拦截.统一异常处理等等.Spring AOP使用了代理模式. Spring AOP底层利用两种代理模 ...

  7. 初步学习pg_control文件之三

    接前文,初步学习pg_control文件之二 继续学习: 研究 DBState,先研究 DB_IN_PRODUCTION ,看它如何出现: 它出现在启动Postmaster时运行的函数处: /* * ...

  8. C++11中default的使用

    In C++11, defaulted and deleted functions give you explicit control over whether the special member ...

  9. Tapestry 权威讲解-备份

    http://blog.csdn.net/mindhawk/article/details/5021371#introduction

  10. 预装win8的笔记本如何重装win7

    测试电脑联想T440. 开机按F1,然后Enter,进入Bios设置. 先关闭Secure Boot,然后设置为Legacy Boot. 之后才能设置U盘为第一启动盘. 进入老毛桃的PE系统,使用Di ...