table内容超出宽度时隐藏并显示省略标记
HTML中,一个表格,要达到二个条件:
1、内容多了不自动换行;
2、固定单元格宽度。如果内容超出,则隐藏;
如 果在IE下,只是写成<table style="table-layout:fixed; overflow:hidden;"><tr><td nowrap>则可,而在FF下则不行。兼容IE和FF的写法,应该为:<table style="table-layout:fixed;"><tr>td style="overflow:hidden;" nowrap>
3、显示省略标记,只支持IE:
text-overflow:ellipsis;
测试代码:
<style>.tbl {table-layout:fixed}.td {overflow:hidden;text-overflow:ellipsis}</style>
<table class="tbl" border=1 width=80>
<tr>
<td width=25% class="td" nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
<td class="td" nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td>
</tr>
</table>
table内容超出宽度时隐藏并显示省略标记的更多相关文章
- 解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号
在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overfl ...
- CSS- 文本超出指定宽度后隐藏并显示为省略号
一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:25em; word-break:keep-all;/* 不换行 * ...
- Html table 内容超出显示省略号
内容超出显示省略号: <html> <style> table { table-layout: fixed; width: 100%; } table, th, td { bo ...
- Flex布局如何让子类在超出边界时隐藏掉
在flex4中,因为必须添加<s:Scroller>标签才能出现滚动条,如果一个容器例如Panel没有添加滚动条,那么添加到Panel中的child的位置如果超出了Panel的边界,那么这 ...
- CSS 文本溢出时显示省略标记
如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...
- 表格td内容超出宽度显示... table-layout: fixed;
td宽度用百分比固定好的时候,即使设置了 white-space:nowrap;/*文本不会换行,在同一行显示*/ overflow:hidden;超出隐藏 text-overflow:ellipsi ...
- css 内容超出宽度自动换行
1. word-break:break-all;只对英文起作用,以字母作为换行依据2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 PS:要设定宽度!
- Winform启动时隐藏不显示
我最终用了这个方法:1.MainForm的构造方法中添加: public MainForm() { InitializeComponent(); this.ShowInTaskbar = false; ...
- 当div元素内的内容超出其宽度时,自动隐藏超出的内容
word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ te ...
随机推荐
- Rich feature hierarchies for accurate object detection and semantic segmentation(RCNN)
https://zhuanlan.zhihu.com/p/23006190?refer=xiaoleimlnote http://blog.csdn.net/bea_tree/article/deta ...
- 旋度定理(Curl Theorem)和散度定理(Divergence theorem)
原文链接 首先说说格林公式(Green's theorem).对于一段封闭曲线,若其围城的区域D为单连通区域(内部任意曲线围城的区域都属于院区域),则有如下公式: 其中其中L为D的边界,取正方向.如果 ...
- Java8函数之旅 (二) --Java8中的流
流与集合 众所周知,日常开发与操作中涉及到集合的操作相当频繁,而java中对于集合的操作又是相当麻烦.这里你可能就有疑问了,我感觉平常开发的时候操作集合时不麻烦呀?那下面我们从一个例子说起. 计 ...
- 前端JavaScript之DOM事件操作
DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. 1.DOM(Document Object Moduel):文档对象模型 定义了访问和操作HTML文档的标准法,把HT ...
- Mybatis查询报错:There is no getter for property named '*' in 'class java.lang.String
问题: 执行查询时报错:There is no getter for property named '*' in 'class java.lang.String 原因: 传过去的参数为识别.本例为 p ...
- 键盘遮挡控件(textfield/textview.......)
采用的是通知的常规方式 // 解决键盘遮挡问题//选择didShow是因为需要键盘的高度//选择willHide是因为视图frame重置需要优先于键盘消失,否则表现得不连贯 [[NSNotificat ...
- vue中登录模块的插件封装
一个电商城的项目,场景是:在未登录的情况下点击收藏或者加入购物车等操作,执行一个方法如this.$login()来动态插入登录组件. 第一步:写好关于这个登录弹窗的单文件组件 loginBox.vue ...
- python join() 提示UnicodeDecodeError: 'utf8' codec can't decode byte 0xcb in position 0: unexpected end of的原因及解决办法
问题: 在使用join()将列表元素连接成字符串时出错如下 return split.join(result) UnicodeDecodeError: 'utf8' codec can't decod ...
- Kernel list_head demo实现
内核中很多地方用到队列,如果每一个数据结构都实现一个双向队列,并针对这些数据结构实现对应的操作,那么代码将会非常冗余,于是内核抽象出了list_head数据结构,并文参考内核中的代码写成,实现了一个l ...
- 45.VUE学习之--组件之父组件使用scope定义子组件模板样式结构实例讲解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...