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. BZOJ2425 [HAOI2010]计数 【数位dp】

    题目 你有一组非零数字(不一定唯一),你可以在其中插入任意个0,这样就可以产生无限个数.比如说给定{1,2},那么可以生成数字12,21,102,120,201,210,1002,1020,等等. 现 ...

  2. servlet分析

    Servlet生命周期分为三个阶段: 1,初始化阶段  调用init()方法 2,响应客户请求阶段 调用service()方法 3,终止阶段 调用destroy()方法 Servlet初始化阶段: 在 ...

  3. 前端ui框架---ant 蚂蚁金服开源

    蚂蚁金服和饿了么好像不错 饿了么官网:http://element.eleme.io/#/zh-CN饿了么github:http://github.com/elemefe 蚂蚁金服  https:// ...

  4. Codevs 5564 陶陶摘苹果2

    5564 陶陶摘苹果2 时间限制: 1 s 空间限制: 16000 KB 题目等级 : 白银 Silver 题目描述 Description 陶陶已经够高摘到所有苹果了,但是他力量有限,最大承受质量为 ...

  5. BZOJ——1611: [Usaco2008 Feb]Meteor Shower流星雨

    http://www.lydsy.com/JudgeOnline/problem.php?id=1611 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1 ...

  6. noip2009提高组解题报告

    NOIP2009潜伏者 题目描述 R 国和S 国正陷入战火之中,双方都互派间谍,潜入对方内部,伺机行动. 历尽艰险后,潜伏于 S 国的R 国间谍小C 终于摸清了S 国军用密码的编码规则: 1. S 国 ...

  7. JavaSE的static、final、abstract修饰符

    static :静态常量,静态方法,静态代码块     静态变量:  静态变量属于类的,使用类名来访问,非静态变量是属于对象的,"必须"使用对象来访问.           注意: ...

  8. DELPHI方法注释的标准写法

    /// <summary> /// 查询数据 /// </summary> /// <param name="accountno">帐套号< ...

  9. android 打开浏览器指定网页

    <?xml version="1.0" encoding="utf-8"?> <!-- 定义当前布局的基本LinearLayout --> ...

  10. 解决vs2005调试时出现未载入符号的问题

    首先在以下的网址下载相应系统的符号包 http://www.microsoft.com/whdc/devtools/debugging/symbolpkg.mspx 下载完之后安装到一个文件夹比方D: ...