关键字: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. NPOI追加内容到xlsx报错，用Epplus往excle xlsx追加数据

    问题的现象就是,只要不修改xlsx,一直写入或者再次写入xlsx,追加内容都是不会有问题的.但是只要你修改了xlsx,用excle2010或者2007修改了xlsx的内容里面的列宽,或者行高,或者进行 ...

  2. js分割字符串

    js分割字符串 我想达到通过 : 分割 只要第一次分割,后面的内容不使用分割 不行,没找到可以直接用的方法,不过可以通过其它方式达到效果 eg: str.split(':',2)[0] (第一个分隔符 ...

  3. IDEA项目启动报Unable to open debugger port (127.0.0.1:51554): java.net.SocketException "socket closed"

    启动报错: Unable to open debugger port (127.0.0.1:51554): java.net.SocketException "socket closed&q ...

  4. Hadoop(11)-MapReduce概述和简单实操

    1.MapReduce的定义 2.MapReduce的优缺点 优点 缺点 3.MapReduce的核心思想 4.MapReduce进程 5.常用数据序列化类型 6.MapReduce的编程规范 用户编 ...

  5. Hadoop(6)-HDFS的shell操作

    1．基本语法 使用 hadoop fs 具体命令   或者   hdfs dfs 具体命令 hadoop命令的shell源码 hdfs命令的shell源码 由此可见,这两个命令最后都是执行的一个jav ...

  6. python学习——装饰器函数

    一.装饰器函数的作用是什么 答:装饰器函数是在不修改原函数及其调用方式的情况下对原函数功能进行扩展 对于搞python开发的人来说,函数占据了至关重要的地位.都说学好函数你就可以去找工作了,好了,假如 ...

  7. python3 练习题100例 （二十九）猴子吃桃问题

    题目内容: 猴子第一天摘下若干个桃子,当即吃了一半,还不过瘾,又多吃了一个第二天早上又将剩下的桃子吃掉一半,又多吃了一个.以后每天早上都吃了前一天剩下的一半零一个.到第n天(<1<n< ...

  8. json模块、os模块

    一.eval模拟序列化操作 1.序列化 内存中的数据-------->转成一种中间格式(字符串)---------->存到文件中 dic={'name':'egon','age':18} ...

  9. Hadoop Sentry 学习

    什么是Sentry? Sentry 是Cloudera 公司发布的一个Hadoop开源组件,它提供细粒度基于角色的安全控制 Sentry下的数据访问和授权 通过引进Sentry,Hadoop目前可在以 ...

  10. ORB-SLAM 代码笔记（四）tracking代码结构

    首先要清楚ORB-SLAM视觉跟踪的原理,然后对tracking.cc中的函数逐个讲解 代码的前面部分是从配置文件中读取校准好的相机参数(内参和畸变参数,以及双目的深度测量设定),并且加载ORB特征点 ...