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 ...
随机推荐
- 2017.11.20 基于JSP+Servlet+JavaBean实现复数运算(一)
(7)在Servlet中使用JavaBean Servlet和JavaBean都是类,在Servlet中使用JavaBean有两种方式: 1.在一个Servlet中单独使用JavaBean 一般完成的 ...
- 剑指offer39 平衡二叉树
剑指上用了指针传递,这里用的引用传递 class Solution { public: bool IsBalanced_Solution(TreeNode* pRoot) { ; return IsB ...
- json 序列化和反序列化的3个方法
https://www.cnblogs.com/caofangsheng/p/5687994.html
- Spring boot 项目导出可执行jar
配置文件中添加插件 <plugin> <groupId>org.springframework.boot</groupId> <artifactId>s ...
- Spring Java配置
Java配置 Java配置是Spring 4.x推荐的配置方式,可以完全替代xml配置:Java配置也是Sping Boot 推荐的配置方式.Java配置是通过@Configuration和@Bean ...
- 复式记账中"借"与"贷"的理解
财务常识中,复式记账法应用极广,公司采用的是它的借贷记账法.因此,深刻的理解"借"与"贷"的含义极其重要. 一切从历史说起. 起源: Credit 英文含义 ...
- C#静态成员和非静态成员
一.C#静态成员和非静态成员 1. C#静态成员和非静态成员 当类中的某个成员使用static修饰符时,就会被声明为静态成员.类中的成员要么是静态成员,要么是非静态成员.一般情况下,静态成员属于整个类 ...
- 插入数据返回自增id及插入更新二合一
原文https://blog.csdn.net/dumzp13/article/details/50984413 JDBC: con.setAutoCommit(false); String sql ...
- windows服务器配置tomcat开机自动启动
背景:最近在做服务器部署的工作,开始的时候都是手动将tomcat进行启动的,但是在遇到几次服务器重启后发现这样太过麻烦,影响项目运行,故事就从这里开始了. 我们的项目是使用spring-boot进行开 ...
- django+xadmin在线教育平台(十一)
6-1 首页和登录页面的配置 用户访问我们的根目录,我们需要把html文件返回给用户.因此我们第一步把html文件放入template目录. mark 在html中找到首页的html.拷贝到我们的 ...