td测试内容超出显示省略号时,结果没有显示省略号,而是一直往后显示,且超出了td大小,强行挤大了table.

原因是因为td默认不换行。

解决方法:

1.强制td换行. IE加上word-break:break-all;

2.是给td加上display: inline-block;

3.在下面加一个其他标签如a,加上display: inline-block; 以及宽度。

html如下:

<tr><td>1</td><td><a href="#">你的16年计划完成几个了?</a></td></tr>

css如下:

td:first-child{width: 20px;}

td:last-child{width: 230px;}

td a{overflow:hidden; white-space:nowrap; text-overflow: ellipsis; word-break:break-all; display: inline-block; width: 220px;}

td 中设置超出宽度显示省略号失效的更多相关文章

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

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

  2. CSS控制文本超出指定宽度显示省略号和文本不换行

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...

  3. css设置内容超出后显示省略号

    1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...

  4. HTML5 元素文字超出部分显示省略号(支持多行),兼容几乎所有常用浏览器

    1,公共样式,在公共的 CSS 文件中加入以下内容  /* 超出部分显示省略号,支持多行 */ .text-ells:before { content: ''; float: left; width: ...

  5. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  6. CSS实现单行、多行文本超出部分显示省略号

     单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...

  7. css文本强制两行超出就显示省略号,不显示省略号

    1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. ...

  8. css 超出部分显示省略号

    代码: overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解 ...

  9. JS控制文字只显示两行,超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

随机推荐

  1. UOJ 34 多项式乘法 ——NTT

    [题目分析] 快速数论变换的模板题目. 与fft的方法类似,只是把复数域中的具有循环性质的单位复数根换成了模意义下的原根. 然后和fft一样写就好了,没有精度误差,但是跑起来比较慢. 这破题目改了好长 ...

  2. POJ 1330:Nearest Common Ancestors【lca】

    题目大意:唔 就是给你一棵树 和两个点,问你这两个点的LCA是什么 思路:LCA的模板题,要注意的是在并查集合并的时候并不是随意的,而是把叶子节点合到父节点上 #include<cstdio&g ...

  3. java面试题之什么是死锁、活锁、饿死和竞态条件?

    死锁:是指两个或两个以上的进程(或线程)在执行过程中,因争夺资源而造成的一种相互等待的现象,若无外力作用,他们将无法推进下去: 活锁:是指两个线程优先级相同,都礼让不走,就这样一直僵持下去: 饿死:在 ...

  4. ElasticSearch分词器

    什么是分词器? 分词器,是将用户输入的一段文本,分析成符合逻辑的一种工具.到目前为止呢,分词器没有办法做到完全的符合人们的要求.和我们有关的分词器有英文的和中文的.英文的分词器过程:输入文本-关键词切 ...

  5. 易语言报错:无法定位链接器!请检查 tools\link.ini 中的配置是否正确。 静态连接失败

    今天下午搞易语言,在编写动态链接库以后,静态编译的时候出现以下提示: 无法定位链接器!请检查 tools\link.ini 中的配置是否正确. 静态连接失败 于是网上百度了下,找到相关的解决方法: 编 ...

  6. EMD距离

    一.场景介绍   最近在研究一个场景:图片质量评分,给一张图片一个预测的分数.   里面提到了用 EMD(Earth Mover’s Distance)算法来评估两张图片之间的分布距离.下面主要讲解下 ...

  7. PHPstorm注册码(7.1.3)

    UserName EMBRACE ===== LICENSE BEGIN ===== 18710-12042010 00000EsehCiFamTQe"7jHcPB16QOyk S" ...

  8. hanzi 全拼音 qu de

    Function pinyin(ByVal mystr As String, Optional types As Byte = 0) As StringDim temp   As String, i ...

  9. hdu 4883

    简单题,当时竟然没有敲出来╮(╯▽╰)╭... 方法:每个时间点排序从小到大排序,之后扫一遍即可:是进的时间点就加人,反之出人.更新最大值即可....囧... #include<iostream ...

  10. 扰动函数和拉链法模拟HashMap的存储结构

    HashMap是Map接口下面的子孙,它对外是K,V结构存储的,而内部也着自己的存储结构,它的get操作是O(1)的时间复杂度,可以说是非常快的找到目录,而添加时,也是O(1),所以在键值存储里,它成 ...