注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Jon的毛线球

叩首问路,码梦维生。

 
 
 

日志

 
 

隐藏文字显示省略号 text-overflow:ellipsis 及 表格单元格的计算规则  

2014-03-19 21:41:48|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
关键字: text-overflow:ellipsis
语法:text-overflow : clip | ellipsis
 
取值:
clip :默认值 。不显示省略标记(...),而是简单的裁切.
ellipsis: 当对象内文本溢出时显示省略标记(...).
 
如果想让某个容器(div或者li或者...块级元素)显示一行文字,当文字内容过多时,不换行,而是出现...(一堆~)

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#box{width:100px;background-color:#87CEEB;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

<!DOCTYPE>
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">table{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>

隐藏文字显示省略号 text-overflow:ellipsis 及 表格单元格的计算规则 - 毛线球 - zxy3622008的博客
就是这个样子 一点效果都没有,可视我们写了上面的三个要素 为什么还是出现这种情况呢?

这里就涉及到了表格的计算模式问题

表格分为固定计算布局 和 自动计算布局

固定表格布局:
固定表格布局与自动表格布局相比,允许浏览器更快地对表格进行布局。
在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。
通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格。

自动表格布局:
在自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的。
此算法有时会较慢,这是由于它需要在确定最终的布局之前访问表格中所有的内容。

所以只要给 table加上 table-layout:fixed; 就可以了。

 
  评论这张
 
阅读(7)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017