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">

</body></html>

注意：

1.一定要给table定义table-layout:fixed;只有定义了表格的布局算法为fixed，下面td的定义才能起作用。

其它的要点和上面一样

text-overflow 的兼容性：

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

test-overflow:ellipsis的应用----转载的更多相关文章

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_ ...

随机推荐

JedisCluster简单使用
项目中因为一些原因需要用到缓存,之前没有接触过,在此做一些简单的使用记录. 1.jedis在项目中依赖 <dependency> <groupId>redis.clients& ...
linux查看cpu个数，线程数及cpu型号
1.查看CPU逻辑id grep 'physical id' /proc/cpuinfo | sort -u physical id : 0physical id : 1 2.查看物理CPU个数 $ ...
COM中参数标识
php redis队列操作
php redis队列操作 rpush/rpushx 有序列表操作,从队列后插入元素:lpush/lpushx 和 rpush/rpushx 的区别是插入到队列的头部,同上,'x'含义是只对已存在的 ...
inux下输入ifconfig命令，没有eth0，怎么解决
用ifconfig命令,只有lo,没有eth0的解决方案问题描述:视频中输入ifconfig命令,显示eth0和lo,但是自己在虚拟机中并非得到这样的结果,而是只有lo,即网卡未启动,也没有ip,无 ...
git的基本用法
作业要求来自https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2097 一:以下是git的基本使用方法: 1:首先先进行账号注册. 2:然 ...
laravel 分页使用
分页 //对数据库结果分页 $users = DB::table('users')->paginate(15); //可以对 Eloquent 模型分页: $allUsers = User::p ...
jQuery 筛选器2
jQuery 筛选器2 // 由于$()只能输入字符串$('#li:eq(1)'),可通过.eq()来传入. // 获取this标签中的指定属性 $(this).eq(1) // 获取第一个元素 $( ...
JSOIWC2019游记
世除我WC...都去广二了qaq,就我还在nj ycs至少也去了pkuwc啊这个JSOIWC2019的内容看起来很水,进入条件简单,但窝啥都不会,肯定垫底内容清单: 1.26 上午听机房dalao ...
D2欧拉路，拓扑排序，和差分约束
第一题:太鼓达人:BZOJ3033 题意:给出k,求一个最长的M位01串,使其从每一个位置向后走k个得到的M个k位01串互不相同(最后一个和第一个相邻,即是一个环).输出字典序最小的答案. 2 ≤ ...

test-overflow:ellipsis的应用----转载

test-overflow:ellipsis的应用----转载的更多相关文章

随机推荐

热门专题