文本多余部分...显示

之前做win8平板开发时遇到文本太长导致布局混乱，后来在网上查询方法如下：

.oneLineText{
 overflow: hidden;//超出部分隐藏,除hidden属性外，还有visible,scroll,auto,inherit，字面意思即可知道它们的行为
 white-space: nowrap;//文本不换行
 text-overflow: ellipsis;//超出部分...显示，除ellipsis外，还有clip（直接裁切）
}

但是在后来的项目中遇到table时，这么做就没有效果了。原来以上属性对于div,span等都有效果，只要它们定义了width..对于table，需要额外增加如下：

table{
 table-layout:fixed;  //表格布局由列宽及表格宽度决定。除此之外，还有inherit和automatic，前者从父元素继承属性，后者为由内容决定宽度是默认值  
}

 

当文本多余部分以...显示后，想要查看全部内容时，有如下方法：

1）title属性

2）jquery UI的tooltip

3）自定义弹出框

....