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. USACO Runaround Numbers

    题目大意:问最近的比n大的循环数是多少 思路:第n遍暴力大法好 /*{ ID:a4298442 PROB:runround LANG:C++ } */ #include<iostream> ...

  2. hdu 1166 树状数组(线段树)

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  3. poj 2987 Firing

    Firing Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 10696   Accepted: 3226 Descript ...

  4. [C/C++] 结构体内存对齐用法

    一.为什么要内存对齐 经过内存对齐之后,CPU的内存访问速度大大提升; 内存空间按照byte划分,从理论上讲似乎对任何类型的变量的访问可以从任何地址开始,但实际情况是在访问特定变量的时候经常在特定的内 ...

  5. php——配合QQ邮箱发送邮件

    最近做一个域名管理系统的项目,实现在域名还有三十天的时候系统发送邮件到QQ邮箱从而提醒续费: 这里运用到了phpmailer; 1:getAll函数: function getAll($con,$sq ...

  6. 487. Max Consecutive Ones II

    Given a binary array, find the maximum number of consecutive 1s in this array if you can flip at mos ...

  7. Python中%r与%s的区别

    %r是rper()方法处理的对象 %s是str()方法处理的对象 其实有些情况下,两者处理的结果是一样的,比如说处理数据类型为int型对象: 例如1: print ('I am %d year old ...

  8. 安装Django时解决的问题-mysql及访问(附pycharm激活)

    1.做些软链接和virtualenv的基本使用: ln -s /data/linkdood/im/vrv/python36/bin/python3.6 /usr/bin/python3 ln -s / ...

  9. the import org.springframewok.test cannot be resolved

    在写Spring的单元测试时遇见了问题,注解@ContextConfiguration和SpringJUnit4ClassRunner.class无法导包.手动导包后错误为“the import or ...

  10. Linux内核配置选项

    http://blog.csdn.net/wdsfup/article/details/52302142 http://www.manew.com/blog-166674-12962.html Gen ...