table中超过长度的列,显示省略号
<style type="text/css">
.table-ellipsis {
table-layout: fixed;
width: 100%;
} .table-ellipsis td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style> <table class="table-ellipsis">
<tr>
<td style="width:10%;">helphelphelphelphelphelphelphelphelphelp</td>
<td style="width:1%;">:</td>
<td style="width:20%" >
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbb
</td>
<td >123456789</td>
</tr>
</table>
注意几点:
1,table的width必须设定值,上面设定的是100%,也可以设置为400px等。
2,table-layout: fixed; 这样设置后,表格的每列的宽度由第一行的每列宽度决定。如果不设置就会平均分配宽度。
3,td中要直接放文字,不能套一个span,div等,套了之后,省略号是没有效果的。
4,如果第一列中有合并的列(colspan),合并列中的子列将会平均分配合并列宽度,即使你在第二行合并列的子列设置宽度,也是无效的。
要解决这个问题,可以考虑,在开头增加一行tr,设置height=0px,这一行专门用来控制每一列的宽度,所以这一行不能有合并列。
5,text-overflow: ellipsis; 除了显示省略号,还可以为text-overflow: clip;(截断)
table中超过长度的列,显示省略号的更多相关文章
- table 中 文字长度大于td宽度,导致文字换行 解决方案
1.TD不换行 nowrap属性 表格table的td单元格中,文字长了往往会撑开单元格,但是如果table都不够宽了,就换行了好像(不要较真其他情况,我只说会换行的情况).换行后的表格显得乱糟糟,不 ...
- Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示
一.设置文字超出宽度显示省略号 注意点: 1. 需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...
- css控制标题长度超出部分显示省略号
width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或检索是否使用一个省略标记(...)标示对象内文本 ...
- css公共库——简介中超过长度显示省略号
在简介.引言中常见:文字只有一排,超出宽度以省略号显示,像这样 实现方法:在公共库定义otw类 .otw{ overflow: hidden; text-overflow: ellipsis; whi ...
- Android中TextView设置最大长度,超出显示省略号
今天在项目中碰到一个问题,在一个页面的顶部的标题栏显示公司的名字,但由于公司名称较长,显示不开,影响美观.故在网上查阅资料,在此做个小的总结. TextView中有个ellipsize属性,作用是当文 ...
- table 中实现 控制 指定列的 左对齐 右对齐方式
.listTable{ border-collapse:collapse; border-top:1px solid #8c9594; border-right:1px solid #8c9594; ...
- ElementUI table中el-table-column怎么设置百分比显示。
看文档找到一种方法,是把 width 换成 min-width ,就支持百分比显示啦 !
- 用Jquery选择器计算table中的某一列某一行的合计
核心算法: $('#tableId tr').each(function() { $(this).find('td:eq(columnIndex)').each(function() { totalA ...
- 设置Textview最大长度,超出显示省略号
<TextView android:id="@+id/tvUserNameUgcListItem" android:layout_height="@dimen/dp ...
随机推荐
- CustomValidator控件用法
虽然大部分时间一直从事asp.net的开发,对于一些常用的asp.net服务器端验证控件及它们的组合使用比较熟悉,如:CompareValidator ——比较验证控件RangeValidator — ...
- Codeforces Round #207 (Div. 1) B. Xenia and Hamming(gcd的运用)
题目链接: B. Xenia and Hamming 题意: 要求找到复制后的两个字符串中不同样的字符 思路: 子问题: 在两串长度是最大公倍数的情况下, 求出一个串在还有一个串中反复字符的个数 CO ...
- STVD中将现有工程重命名为另一个工程
http://blog.csdn.net/sy_lixiang/article/details/47273649 例子:把工程名为Template的工程改为color,把左边红圈部分重命名为右面的名字 ...
- jmeter Best Practices
性能测试最佳实践之JMeter 16. Best Practices 16.1 Always use latest version of JMeter The performance of JMete ...
- mysql group replication 主节点宕机恢复
一.mysql group replication 生来就要面对两个问题: 一.主节点宕机如何恢复. 二.多数节点离线的情况下.余下节点如何继续承载业务. 在这里我们只讨论第一个问题.也就是说当主结点 ...
- 如何在WPF中调用Winform控件
原文地址:http://hi.baidu.com/stuoopluwqbbeod/item/32ec38403da42ee2bcf45167 功能实现主要分三步:1.添加两个引用:WindowsFor ...
- Windows Mobile入门
转自 http://www.cnblogs.com/peterzb/archive/2009/05/12/1455256.html [准备篇] 最近安排做手机视频监控方面开发,这个对我来 ...
- Outlook 如何初始化邮箱
首先我们找到邮箱的安装位置,我们可以右键Outlook,然后看其属性.找到其安装位置,复制下来,比如说 "C:\Program Files\Microsoft Office\root\Off ...
- HTML常用标签(整理)
超文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言.现在应用主流是HTML 4.01版本,发布于1999年,为W3C推荐标准.HTML ...
- Python 父目录获取
# coding=utf-8import os currentPath = os.getcwd() # 当前目录parent_path = os.path.dirname(currentPath) # ...