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

拥有自己的梦想,跟随心的召唤

平凡是福

 
 
 

日志

 
 

Table列宽、单元格内容溢出、自动换行控制  

2013-03-08 11:59:10|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
1)固定列宽控制:
table关键样式:table-layout: fixed;
<table style="table-layout: fixed;">
    <colgroup>
        <col style="width: 50px;">
        <col style="width: 50px;">
        <col style="width: 50px;">
    </colgroup>
    <tbody>
        <tr>
            <td>test</td>
            <td>test test test test</td>
            <td>test</td>
        </tr>
    </tbody>
</table>
说明:配置"table-layout: fixed"后,各列的宽度完全受col中的width控制,否则,td中的内容超出col的width值时,列会自动撑宽来容纳并显示其全部内容。

2)td内的文本溢出、换行控制:
文本溢出显示省略号的控制样式:text-overflow: ellipsis; /*clip|ellipsis|string*/
    对于中文字符需要添加:white-space: nowrap;
文本自动换行的控制样式:word-wrap: break-word; word-break: break-all; 
特别注意:
    text-overflow属性仅是注解,当文本溢出时是否显示省略标记,并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样才能实现溢出文本显示省略号的效果。
    当容器内含有块子元素时,溢出省略号显示的效果也是无法实现的!

参考:
CSS强制英文、中文换行与不换行table中cellpadding、cellpadding样式定义
Table单元格td的position:relative的兼容性
  评论这张
 
阅读(1579)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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