text-overflow:ellipsis 的应用（转载）
关键字: text-overflow:ellipsis
语法：text-overflow : clip | ellipsis
取值：
clip ：默认值 。不显示省略标记(...)，而是简单的裁切.
ellipsis： 当对象内文本溢出时显示省略标记(...).
可惜text-overflow 还只是ie的私有属性而已，也没被收录到w3c标准里 .
如果想让某个容器（div或者li或者...块级元素）显示一行文字，当文字内容过多时，不换行，而是出现...
这样写：例如
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">
- #box{width:100px;padding:2px 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
- </style>
- </head>
- <body>
- <div id="box">锦江之星旅馆有限公司系亚洲规模最大的综合性旅游企业集团</div>
- </body>
- </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代码
- <!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>
<!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 的应用（转载）的更多相关文章
- test-overflow:ellipsis的应用----转载
关键字: text-overflow:ellipsis 语法:text-overflow : clip | ellipsis 取值: clip :默认值 .不显示省略标记(...),而是简单的裁切. ...
- sql 里 text类型的操作（转载）
SQL Server中TEXT类型字段值在数据库中追加字符串方法 对text类型字段值进行追加更新的操作,一开始用了简单的update语句试了试,有错误,原来text.ntext类型的字段不能和 va ...
- Spring MVC-表单（Form）标签-文本框（Text Box）示例（转载实践）
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_textbox.htm 说明:示例基于Spring MVC 4.1.6. 以下示例 ...
- css & text-overflow & ellipsis
css & text-overflow & ellipsis https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflo ...
- css & multi line words & ellipsis
css & multi line words & ellipsis bug .news-card-content-title { width: 100%; height: 0.8rem ...
- 微信小程序中如何实现分页下拉加载？（附源码）
转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...
- 教你解决Sublime Text中文乱码问题
教你解决Sublime Text中文乱码问题[转载自成长的企鹅] Sublime Text 2是一个非常不错的源代码及文本编辑器,但是不支持GB2312和GBK编码在很多情况下会非常麻烦. ...
- 转：CSS Overflow 属性
原文:CSS Overflow 属性译自:The CSS Overflow Property版权所有,转载请注明出处,多谢!! 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的 ...
- overflow属性-摘自网友
关于我们 版权声明 网站地图 前端观察 专注于网站前端设计与前端开发 用IE6抢不到火车票的!!! Home 首页 CSS样式之美 Front News前端资讯 JavascriptAjax与JS技术 ...
- 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 ...
随机推荐
- （转载）URL与URI的区别
(转载)http://blog.csdn.net/eagle51998/article/details/372052 1 URL(Uniform Resoure Locator:统一资源定位器)是W ...
- 《编写高质量代码——Web前端开发修炼之道》读后随笔
结构样式行为的分离 结构标准包括XML标准.XHTML标准.HTML标准:样式标准有CSS标准:行为标准主要包括DOM标准和ECMAScript标准. 通常的项目会按照如上的方式进行分离,但自己曾今做 ...
- [Locked] Inorder Successor in BST
Inorder Successor in BST Given a binary search tree and a node in it, find the in-order successor of ...
- linux环境下deb格式 转换成rpm格式
linux环境下deb格式 转换成rpm格式 使用alien工具转换deb格式到rpm格式 alien_8.87.tar.gz 下载alien_8.87.tar.gz [root@mysqlnode2 ...
- JavaScript中的[]和{}
最早开始对js中括号的使用有疑问是在交互2值的时候: a = [b,b=a][0]; 详见JavaScript交换两个变量值的七种解决方案 因为 [[]][0] 的意思是:获取 [[]] 的第一个元素 ...
- php动态分页类
<?php /** * 页面名称:cls_page.php */ class Page { private $each_disNums; //每页显示的条目数 private $nums; // ...
- 在Eclipse中使用JUnit4进行单元測试（0基础篇）
本文绝大部分内容引自这篇文章: http://www.devx.com/Java/Article/31983/0/page/1 我们在编写大型程序的时候,须要写成千上万个方法或函数,这些函数的功能可能 ...
- inux 安装中文支持包及中文字符集配置 +i18n
由于某些原因系统安装时未安装中文支持,导致后续应用出现中文方块乱码现象, 解决方法很简单,当然不是重装,只需以下三步即可搞定. .安装中文包: yum -y groupinstall chinese- ...
- Android群英传》读书笔记 (1) 第一章 Android体系与系统架构 + 第二章 Android开发工具新接触
第一章 Android体系与系统架构 1.Dalvik 和 ARTDalvik好比是一辆可折叠的自行车,平时是折叠的,只有骑的时候,才需要组装起来用.ART好比是一辆组装好了的自行车,装好就可以骑了. ...
- redis 多实例配置
(redis的安装, 配置, 登陆等基础不再多说, 网上很多资料的, 这里只说个人对redis多实例的理解与配置) 我自己使用的redis版本是 2.8.13, 环境是 ubuntu 个人对多实例的理 ...