关键字: text-overflow:ellipsis

语法：text-overflow : clip | ellipsis

取值：

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

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

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

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

这样写：例如

Html代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6. <style type="text/css">
  7. #box{width:100px;padding:2px 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  8. </style>
  9. </head>
  10. <body>
  11. <div id="box">锦江之星旅馆有限公司系亚洲规模最大的综合性旅游企业集团</div>
  12. </body>
  13. </html>

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

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

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

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

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

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

这样写：例如

Html代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6. <style type="text/css">
  7. table{table-layout:fixed;width:106px;}
  8. td{padding:2px 3px;border:1px solid #000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  9. </style>
  10. </head>
  11. <body>
  12. <table cellspacing="0" cellpadding="0"><tr><td>锦江之星旅馆有限公司系亚洲规模最大的综合性旅游企业集团</td></tr></table></body>
  13. </html>

<!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 的兼容性：

测过ie6，ie7，ff3，safari，opera，chorme，只有ff3和opera不兼容

text-overflow:ellipsis的巧妙运用的更多相关文章

  1. css & text-overflow & ellipsis

    css & text-overflow & ellipsis https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflo ...

  2. css & multi line words & ellipsis

    css & multi line words & ellipsis bug .news-card-content-title { width: 100%; height: 0.8rem ...

  3. 微信小程序中如何实现分页下拉加载？（附源码）

    转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...

  4. 一类巧妙利用利用失配树的序列DP

    I.导入 求长度为\(\text{len}\)的包含给定连续子串\(\text{T}\)的 0/1 串的个数.(\(|T|<=15\)) 通常来说这种题目应该立刻联想到状压 DP 与取反集--这 ...

  5. css3

    CSS3的换行 如果某个单词太长,不适合在一个区域内,它扩展到外面: 自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字: 允许长文本换行: p {word-wrap:break-wo ...

  6. css常用的特效代码

    一.网页变灰的代码:a) 网页变灰色<head>加到这里</head><style type="text/css">html {FILTER: ...

  7. 带搜索框的下拉框chosen.jQury.js

    下载所需js,css png资源     <link href="chosen.css" rel="stylesheet" type="text ...

  8. 全国三级城市联动 js版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. CSS选项卡

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org ...

随机推荐

  1. 转:小心，apc可能导致php-fpm罢工！

    原文来自于:http://www.searchtb.com/2014/02/apc-lock-php-fpm.html 最近线上产品出现了502错误.一般出现502错误,都是php-fpm 进程处理请 ...

  2. 香港house of hello品牌包包是怎样被模仿呢？

    今天,作为女性的朋友来说,house of hello包包可能对大家都不会陌生吧,特别是一些白领阶层的女性同胞们,这个品牌比较熟悉,现在,也有网友称,这个是恶搞包包.house of hello包包原 ...

  3. 转：USB主机控制器(Host Controller)--深入理解

    1. 主机控制器(Host Controller) • UHCI: Universal Host Controller Interface (通用主机控制接口, USB1.0/1.1)      • ...

  4. sql restore mode

    refer : https://msdn.microsoft.com/en-us/library/ms189272.aspx SELECT name, recovery_model_desc FROM ...

  5. Ubiquitous Religions（并查集）

    Description There are so many different religions in the world today that it is difficult to keep tr ...

  6. Delphi文件映射

    http://www.cnblogs.com/key-ok/p/3429860.htmlhttp://www.cnblogs.com/key-ok/p/3380793.htmlhttp://www.c ...

  7. 【HDOJ】3220 Alice’s Cube

    状态压缩+逆向BFS.方向数组就是任意相邻的两点(初始化时减1),每个顶点均有4个相邻点.因此,共有16*4/2=32个方向.按序排列即可找到. /* 3220 */ #include <ios ...

  8. vijos1514天才的记忆

    P1514天才的记忆 背景 神仙飞啊飞 描述 从前有个人名叫W and N and B,他有着天才般的记忆力,他珍藏了许多许多的宝藏.在他离世之后留给后人一个难题(专门考验记忆力的啊!),如果谁能轻松 ...

  9. 总结linux无线命令wpa

    关于wpa_supplicant: 用到wpa_cli命令 wpa_cli -iwlan0 add_network             // wlan0 是无线网络设备的名字,增加一个网络,会返回 ...

  10. Dinic 模板

    #include <iostream> #include <cstring> #include <cstdio> #include <queue> us ...