test-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不兼容
test-overflow:ellipsis的应用----转载的更多相关文章
- 转：CSS Overflow 属性
原文:CSS Overflow 属性译自:The CSS Overflow Property版权所有,转载请注明出处,多谢!! 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的 ...
- overflow属性-摘自网友
关于我们 版权声明 网站地图 前端观察 专注于网站前端设计与前端开发 用IE6抢不到火车票的!!! Home 首页 CSS样式之美 Front News前端资讯 JavascriptAjax与JS技术 ...
- 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 ...
- 【转载】C# 中的委托和事件(详解)
<div class="postbody"> <div id="cnblogs_post_body" class="blogpost ...
- CSS选项卡
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org ...
- 微信小程序中如何实现分页下拉加载？（附源码）
转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...
- text-overflow:ellipsis 的应用（转载）
关键字: text-overflow:ellipsis 语法:text-overflow : clip | ellipsis 取值: clip :默认值 .不显示省略标记(...),而是简单的裁切. ...
- 【转载】Stack Overflow: The Architecture - 2016 Edition
转载:http://www.infoq.com/cn/news/2016/03/Stack-Overflow-architecture-insi?utm_source=tuicool&utm_ ...
随机推荐
- 外星人入侵——安装Pygame
本文以win10和Python3为例来介绍如何安装Pygame. 安装Pygame需要使用pip,我们首先检查pip是否已被安装. 打开一个终端窗口,并执行如下命令 C:\Users\hys>p ...
- bounds的应用
frame是参考父view的坐标系来设置自己左上角的位置.设置bounds可以修改自己坐标系的原点位置,进而影响到其“子view”的显示位置. 向上滚动scrollview,我们就不断增加scro ...
- __call__方法和Flask中 first_or_404
1.__call__方法: 在一个类的实例中,函数一般都是可调用的对象: __call__方法时魔法方法,该方法允许程序员创建可调用的对象(实例),默认情况下是不会触发,也就是说,大多数实例是不可被调 ...
- Asynchronous Programming
https://msdn.microsoft.com/zh-cn/library/dd997423.aspx http://www.cnblogs.com/luminji/archive/2010/0 ...
- 探讨JS合并两个数组的方法
我们在项目过程中,有时候会遇到需要将两个数组合并成为一个的情况. 比如: var a = [1,2,3]; var b = [4,5,6]; 有两个数组a.b,需求是将两个数组合并成一个.方法如下: ...
- Mysql模糊查询Like传递参数的语句
set @keyWord='我的': select * from tblcontent where content like CONCAT('%',@keyWord,'%')
- db2空值、null
1. 输入参数为字符类型,且允许为空的,可以使用COALESCE(inputParameter,'')把NULL转换成''; 2. 输入类型为整型,且允许为空的,可以使用COALESCE(inputP ...
- Mysql数据库优化之SQL及索引优化
1. 如何发现有问题的SQL? 使用mysql慢查询日志对有效率问题的Sql进行监视 (1) show variables like 'slow_query_log'; 查看慢查询日志是否 ...
- Python关键点笔记之使用 pyenv 管理多个 Python 版本依赖环境
0x00 背景 从接触Python以来,一直都是采用virtualenv和virtualenvwrapper来管理不同项目的依赖环境,通过workon.mkvirtualenv等命令进行虚拟环境切换, ...
- oracle insert、append、parallel、随后查询的redo与磁盘读写
SQL> set autotrace traceonly statistics; SQL> insert into big_table_dir_test1 select * from bi ...