关键字: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. Percona-Tookit工具包之pt-table-sync

      Preface       We've used pt-table-checksum to checksum the different table data bwtween replicatio ...

  2. MySQL数据库常见报错原因

    1.启动数据库时报错 启动 # /etc/init.d/mysqld start Starting MySQL.Logging to '/application/mysql-5.6.36/data/m ...

  3. 为何要搭建ES6开发环境，如何搭建ES6开发环境？

    1.ES6需要搭建开发环境,原因是现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6语法的,这就需要我们把ES6的语法自动转变成ES5的语法.   2.开始搭建环境   ...

  4. h5移动端页面meta标签

    <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...

  5. python之打印九九乘法表

    配置环境:python 3.6 python编辑器:pycharm 整理成代码如下: #!/usr/bin/env python #-*- coding: utf-8 -*- #九九乘法表 #分析:九 ...

  6. django的查询集

    查询集表示从数据库中获取的对象集合,在管理器上调用某些过滤器方法会返回查询集,查询集可以含有零个.一个或多个过滤器.过滤器基于所给的参数限制查询的结果,从Sql的角度,查询集和select语句等价,过 ...

  7. ctf题目writeup（9）

    继续刷题,找到一个 什么 蓝鲸安全的ctf平台 地址:http://whalectf.xin/challenges (话说这些ctf平台长得好像) 1. 放到converter试一下: 在用十六进制转 ...

  8. count_char

    import java.util.Scanner; public class count_char { public static void main(String args[]) { int cou ...

  9. 141. 环形链表 LeetCode报错:runtime error: member access within null pointer of type 'struct ListNode'

    /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * ListNode ...

  10. SocketServer模块中的几种类

    BaseServer:包括服务器的核心功能与混合类的一些功能. TCPServer:基本的网络同步TCP服务器. UDPServer:基本的网络同步UDP服务器. ForkingMixIn:实现了核心 ...