<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中超过长度的列,显示省略号的更多相关文章

  1. table 中 文字长度大于td宽度,导致文字换行 解决方案

    1.TD不换行 nowrap属性 表格table的td单元格中,文字长了往往会撑开单元格,但是如果table都不够宽了,就换行了好像(不要较真其他情况,我只说会换行的情况).换行后的表格显得乱糟糟,不 ...

  2. Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

  3. css控制标题长度超出部分显示省略号

    width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或检索是否使用一个省略标记(...)标示对象内文本 ...

  4. css公共库——简介中超过长度显示省略号

    在简介.引言中常见:文字只有一排,超出宽度以省略号显示,像这样 实现方法:在公共库定义otw类 .otw{ overflow: hidden; text-overflow: ellipsis; whi ...

  5. Android中TextView设置最大长度,超出显示省略号

    今天在项目中碰到一个问题,在一个页面的顶部的标题栏显示公司的名字,但由于公司名称较长,显示不开,影响美观.故在网上查阅资料,在此做个小的总结. TextView中有个ellipsize属性,作用是当文 ...

  6. table 中实现 控制 指定列的 左对齐 右对齐方式

    .listTable{ border-collapse:collapse; border-top:1px solid #8c9594; border-right:1px solid #8c9594; ...

  7. ElementUI table中el-table-column怎么设置百分比显示。

    看文档找到一种方法,是把 width 换成 min-width ,就支持百分比显示啦 !

  8. 用Jquery选择器计算table中的某一列某一行的合计

    核心算法: $('#tableId tr').each(function() { $(this).find('td:eq(columnIndex)').each(function() { totalA ...

  9. 设置Textview最大长度,超出显示省略号

    <TextView android:id="@+id/tvUserNameUgcListItem" android:layout_height="@dimen/dp ...

随机推荐

  1. CustomValidator控件用法

    虽然大部分时间一直从事asp.net的开发,对于一些常用的asp.net服务器端验证控件及它们的组合使用比较熟悉,如:CompareValidator ——比较验证控件RangeValidator — ...

  2. Codeforces Round #207 (Div. 1) B. Xenia and Hamming(gcd的运用)

    题目链接: B. Xenia and Hamming 题意: 要求找到复制后的两个字符串中不同样的字符 思路: 子问题: 在两串长度是最大公倍数的情况下, 求出一个串在还有一个串中反复字符的个数 CO ...

  3. STVD中将现有工程重命名为另一个工程

    http://blog.csdn.net/sy_lixiang/article/details/47273649 例子:把工程名为Template的工程改为color,把左边红圈部分重命名为右面的名字 ...

  4. jmeter Best Practices

    性能测试最佳实践之JMeter 16. Best Practices 16.1 Always use latest version of JMeter The performance of JMete ...

  5. mysql group replication 主节点宕机恢复

    一.mysql group replication 生来就要面对两个问题: 一.主节点宕机如何恢复. 二.多数节点离线的情况下.余下节点如何继续承载业务. 在这里我们只讨论第一个问题.也就是说当主结点 ...

  6. 如何在WPF中调用Winform控件

    原文地址:http://hi.baidu.com/stuoopluwqbbeod/item/32ec38403da42ee2bcf45167 功能实现主要分三步:1.添加两个引用:WindowsFor ...

  7. Windows Mobile入门

    转自 http://www.cnblogs.com/peterzb/archive/2009/05/12/1455256.html [准备篇]        最近安排做手机视频监控方面开发,这个对我来 ...

  8. Outlook 如何初始化邮箱

    首先我们找到邮箱的安装位置,我们可以右键Outlook,然后看其属性.找到其安装位置,复制下来,比如说 "C:\Program Files\Microsoft Office\root\Off ...

  9. HTML常用标签(整理)

    超文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言.现在应用主流是HTML 4.01版本,发布于1999年,为W3C推荐标准.HTML ...

  10. Python 父目录获取

    # coding=utf-8import os currentPath = os.getcwd() # 当前目录parent_path = os.path.dirname(currentPath) # ...