关键字: 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. test-overflow:ellipsis的应用----转载

    关键字: text-overflow:ellipsis 语法:text-overflow : clip | ellipsis 取值: clip :默认值 .不显示省略标记(...),而是简单的裁切. ...

  2. sql 里 text类型的操作（转载）

    SQL Server中TEXT类型字段值在数据库中追加字符串方法 对text类型字段值进行追加更新的操作,一开始用了简单的update语句试了试,有错误,原来text.ntext类型的字段不能和 va ...

  3. Spring MVC-表单（Form）标签-文本框（Text Box）示例（转载实践）

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_textbox.htm 说明:示例基于Spring MVC 4.1.6. 以下示例 ...

  4. css & text-overflow & ellipsis

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

  5. css & multi line words & ellipsis

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

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

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

  7. 教你解决Sublime Text中文乱码问题

    教你解决Sublime Text中文乱码问题[转载自成长的企鹅]       Sublime Text 2是一个非常不错的源代码及文本编辑器,但是不支持GB2312和GBK编码在很多情况下会非常麻烦. ...

  8. 转：CSS Overflow 属性

    原文:CSS Overflow 属性译自:The CSS Overflow Property版权所有,转载请注明出处,多谢!! 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的 ...

  9. overflow属性-摘自网友

    关于我们 版权声明 网站地图 前端观察 专注于网站前端设计与前端开发 用IE6抢不到火车票的!!! Home 首页 CSS样式之美 Front News前端资讯 JavascriptAjax与JS技术 ...

  10. WPF: Creation of Text Labels for 3D Scene

    原文:WPF: Creation of Text Labels for 3D Scene 转载:http://www.codeproject.com/KB/WPF/WPF_Text3D.aspx Do ...

随机推荐

  1. 数据结构(RMQ)：UVAoj 11235 Frequent values

    Frequent values You are given a sequence of n integers a1 , a2 , ... , an in non-decreasing order. I ...

  2. 我家用的网络IP地址给定，MAC绑定，我买了个无线路由器，请问怎么设定能让我的电脑和手机都能上网

    我家用的网络IP地址给定,MAC绑定,我买了个无线路由器,请问怎么设定能让我的电脑和手机都能上网   房东给的IP地址是:192.168.1.5 255.255.255.0 192.168.1.1 2 ...

  3. Andriod视频http://pan.baidu.com/share/link?shareid=7300&uk=3339495714

    老罗Android开发 视频教程           一.Android入门介绍 视频教程     1.1 android系统介绍   1.3 如何搭建android开发环境   1.5 androi ...

  4. NeoOcean - Unity3D Ocean Waves Simulation

    GMail: bearworks8@gmail.com QQMail:196221347@qq.com QQ Group:391782326 Dropbox Demo:  https://www.dr ...

  5. POJ 1456 Supermarket

    题意:商场卖东西,每种商品有两个属性,一种是价格pi,另一种是保质期di,每种商品只能在天数<=di的时候卖出.每天只能卖一种商品,问最多能卖出价格之和为多少的商品.(n <= 10^4, ...

  6. Java调用R（二）_JRI

    推荐使用.相比RServe更灵活,效率更高. 基本步骤 1.  R中需要安装rJava包. 2.  系统变量Path加上 C:\Program Files\R\R-3.0.1\bin\i386;C:\ ...

  7. FindControl的使用方法

    Control.FindControl (String):在当前的命名容器中搜索带指定 id参数的服务器控件.(有点类似javascript中的getElementById(string)) 简单的例 ...

  8. powershel连接数据库监控数据库状态并发报警邮件

    function Get-DatabaseData {    [CmdletBinding()]    param (        [string]$connectionString,        ...

  9. Linux用户与用户组的详解

    1,用户和用户组文件   在linux中,用户帐号,用户密码,用户组信息和用户组密码均是存放在不同的配置文件中的.   在linux系统中,所创建的用户帐号和其相关信息(密码除外)均是存放在/etc/ ...

  10. Windows的应用管理工具 PortableApps，Chocolatey和Ninite

    以前为了让我的firefox变成portable的,我使用了PortableApps,它不只是做软件的绿色版,而且也是一个软件的管理平台,可以通过它来管理软件的更新,挺方便的. 前段时间试用Scrip ...