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. POJ 1741 Tree ——点分治

    [题目分析] 这貌似是做过第三道以Tree命名的题目了. 听说树分治的代码都很长,一直吓得不敢写,有生之年终于切掉这题. 点分治模板题目.自己YY了好久才写出来. 然后1A了,开心o(* ̄▽ ̄*)ブ ...

  2. BZOJ 1260: [CQOI2007]涂色paint【区间DP】

    Description 假设你有一条长度为5的木版,初始时没有涂过任何颜色.你希望把它的5个单位长度分别涂上红.绿.蓝.绿.红色,用一个长度为5的字符串表示这个目标:RGBGR. 每次你可以把一段连续 ...

  3. 【2018.9.26】K-D Tree详解

    网上对K-D-Tree的讲解不尽清晰,我学了很久都不会写,这里新开一文做一些讲解. 1.K-D-Tree是什么? K-DTree 即 K-Dimensional-Tree,常用来作空间划分及近邻搜索, ...

  4. C 语言中可以调用命令行指令的 system()函数

    C语言有一个system函数(在<stdlib.h>头中,C++则为<cstdlib>头),可以用来调用终端命令.原型如下: int system(const char *cm ...

  5. SQL Server中的@@ROWCOUNT

    SQL Server中@@ROWCOUNT返回受上一语句影响的行数,返回值类型为 int 整型. 如果行数大于 20 亿,则需要使用 ROWCOUNT_BIG. @@ROWCOUNT和@@ERROR变 ...

  6. Python 可变对象与不可变对象

    1. 不可变(immutable):int.字符串(string).float.(数值型number).元组(tuple) 可变(mutable):字典型(dictionary).列表型(list) ...

  7. json-lib maven依赖出错的问题

    项目中要用到json-lib,mvnrepository.com查找它的dependency时结果如下: xml 代码 <dependency> <groupId>net.sf ...

  8. 激活win10系统的方法(亲测)

    WIN+X 按A (或者点击左下角有个windows小图标“鼠标右键”选择选择“命令提示符号(管理员)”) 输入下面命令,回车(一行按一个回车键)slmgr.vbs /upkslmgr /ipk W2 ...

  9. ZOJ 1112 Dynamic Rankings【动态区间第K大,整体二分】

    题目链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1112 题意: 求动态区间第K大. 分析: 把修改操作看成删除与增加 ...

  10. T2602 最短路径问题 codevs

    http://codevs.cn/problem/2602/ 时间限制: 1 s 空间限制: 32000 KB 题目等级 : 黄金 Gold   题目描述 Description 平面上有n个点(n& ...