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内容超出宽度时隐藏并显示省略标记的更多相关文章

  1. 解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号

    在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overfl ...

  2. CSS- 文本超出指定宽度后隐藏并显示为省略号

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:25em; word-break:keep-all;/* 不换行 * ...

  3. Html table 内容超出显示省略号

    内容超出显示省略号: <html> <style> table { table-layout: fixed; width: 100%; } table, th, td { bo ...

  4. Flex布局如何让子类在超出边界时隐藏掉

    在flex4中,因为必须添加<s:Scroller>标签才能出现滚动条,如果一个容器例如Panel没有添加滚动条,那么添加到Panel中的child的位置如果超出了Panel的边界,那么这 ...

  5. CSS 文本溢出时显示省略标记

    如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...

  6. 表格td内容超出宽度显示... table-layout: fixed;

    td宽度用百分比固定好的时候,即使设置了 white-space:nowrap;/*文本不会换行,在同一行显示*/ overflow:hidden;超出隐藏 text-overflow:ellipsi ...

  7. css 内容超出宽度自动换行

    1. word-break:break-all;只对英文起作用,以字母作为换行依据2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 PS:要设定宽度!

  8. Winform启动时隐藏不显示

    我最终用了这个方法:1.MainForm的构造方法中添加: public MainForm() { InitializeComponent(); this.ShowInTaskbar = false; ...

  9. 当div元素内的内容超出其宽度时,自动隐藏超出的内容

    word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ te ...

随机推荐

  1. Ray-AABB交叉检测算法

      最近在解决三维问题时,需要判断线段是否与立方体交叉,这个问题可以引申为:射线是否穿过立方体AABB.   在3D游戏开发中碰撞检测普遍采用的算法是轴对齐矩形边界框(Axially Aligned ...

  2. CUDA Texture纹理存储器 示例程序

    原文链接 /* * Copyright 徐洪志(西北农林科技大学.信息工程学院). All rights reserved. * Data: 2012-4-20 */ // // 此程序是演示了1D和 ...

  3. ES6初识-Proxy和Reflect

    { let obj={ time:'2017-03-11', name:'net', _r:123 };   let monitor=new Proxy(obj,{ // 拦截对象属性的读取 get( ...

  4. HDU2837 Calculation(扩展欧拉定理)

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...

  5. Java分享笔记:FileInputStream流的 read()方法 和 read(byte[] b)方法

    /*------------------------ FileInputStream: ....//输入流,字节流 ....//从硬盘中存在的一个文件中读取内容,读取到程序中 ....//read() ...

  6. mysql基础,索引

  7. Linux问题分析或解决_ssh无法连接

    1. ldd - 检查依赖库是否存在问题 问题:ssh连接不上,之前一直没有问题,最近别人安装了其他桌面(系统Ubuntu) 解决: 查看进程,发现没有启动 ps -ef | grep ssh 重新安 ...

  8. 银行卡验证API

    一.银联开放平台 https://open.unionpay.com/tjweb/api/detail?apiSvcId=21 应用场景 综合数据服务平台是银联为接入商户提供的综合数据认证服务接口,目 ...

  9. 记一次微信小程序在安卓的白屏问题

    在做小程序的时候,做到了一个限时商品售卖,用到了倒计时,因为这个原因导致了安卓手机上使用小程序时,将小程序放入后台运行一段时间后,再次进入小程序后出现了页面白屏或者点击事件失效的情况,这里记录下 1. ...

  10. MySQL 如何生成月份表

    MySQL 如何生成月份表 如果遇到按照月份统计信息的时候,常用的统计方式就是用month表去连接order表,下面就是生成月份表的过程 1.首先是建表 CREATE TABLE `sn_month` ...