关键字: 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. C题 - A+B for Input-Output Practice (II)

      Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u   Description You ...

  2. hadoop job执行完的统计信息

    Total committed heap usage (bytes)= Physical memory (bytes) snapshot= Virtual memory (bytes) snapsho ...

  3. 整理的Java资源

    这里搜集了用来构建应用程序的工具. Apache Maven:Maven使用声明进行构建并进行依赖管理,偏向于使用约定而不是配置进行构建.Maven优于Apache Ant.后者采用了一种过程化的方式 ...

  4. vim学习与理解

    1. 转变思维 --> vim 无鼠标文本编辑工具 在鸟哥的linux私房菜中,是这么说明linux的: 1. vim是linux like系统中非常强大的一个文本编辑工具,历史悠久,很多系统都 ...

  5. TabHost结合RadioButton实现主页的导航效果

    布局文件的设置,如下 <?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:androi ...

  6. Safecracker（搜索）

    http://acm.hdu.edu.cn/showproblem.php?pid=1015 / 题意; 从所给的一串字符串中选出5个字母假如是(A B C D E)使得A-B^2+C^3-D^4+E ...

  7. [Sequence Alignment Methods] Smith–Waterman algorithm

    Smith–Waterman algorithm 首先需要澄清一个事实,Smith–Waterman algorithm是求两个序列的最佳subsequence匹配,与之对应的算法但是求两个序列整体匹 ...

  8. hdu 4602 Partition 数学（组合-隔板法）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4602 我们可以特判出n<= k的情况. 对于1<= k<n,我们可以等效为n个点排成 ...

  9. Necklace of Beads

    http://poj.org/problem?id=1286 // File Name: poj1286.cpp // Author: bo_jwolf // Created Time: 2013年1 ...

  10. 分布式锁1 Java常用技术方案(转)

    转:http://www.cnblogs.com/PurpleDream/p/5559352.html#3450419 前言:       由于在平时的工作中,线上服务器是分布式多台部署的,经常会面临 ...