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. Linux 下测试磁盘读写 I/O 速度的方法汇总

    在分布式异构存储系统中,我们经常会需要测量获取不同节点中硬盘/磁盘的读写 I/O 速度,下面是 Linux 系统下一些常用测试方法(之后不定期更新): 1.使用 hdparm 命令这是一个是用来获取A ...

  2. Spoj-NPC2015A Eefun Guessing Words

    Eefun Guessing Words Eefun is currently learning to read. His way of learning  is unique, by trying ...

  3. tomcat设置去项目路径

    1. 新建一个目录专门用于存放工程, 如: G:\apache-tomcat-6.0.20\project 2. 将工程存放到以上目录下:即:G:\apache-tomcat-6.0.20\proje ...

  4. oracle连接封装方法

    public static void updateSqlOracle(String sqlstr,String linkIP,String username,String password) thro ...

  5. PHP中使用GD库方式画时钟

    <!--demo.html中内容--> <body> <img id="time" src="test.php" /> &l ...

  6. HttpClient配置

    ClientConfiguration.java 该类讲解了HttpClient的各方面的配置 package com.ydd.study.hello.httpclient; import java. ...

  7. Credit Memo和Debit Memo在AR以及AP中的概念比较

    AR和AP中都有Credit Memo和Debit Memo的概念, 但是其含义和用法完全不一样,比较难懂,现在整理如下:AR中的CreditMemo和DebitMemo是和客户打交道:AR中的Cre ...

  8. 【面试 springMVC】【第四篇】springMVC的一些问题

    1.springMVC的工作流程是什么样的 1.用户请求到达 2.DispatcherServlet接收请求,发送给处理器映射器 3.处理器映射器handlerMapping,处理找到对应处理器,返回 ...

  9. linux 文件属性、权限、所有人、所属组

    Linux命令行模式下,文件还是需要通过ls -l来查看 可以通过ll查看长文件,会有如下类型显示drwxr-xr-x  2 root root 4096 Nov 10  2010 conf 总共有7 ...

  10. Regularized least-squares classification(正则化最小二乘法分类器)取代SVM

    在机器学习或者是模式识别其中有一种重要的分类器叫做:SVM .这个被广泛的应用于各个领域.可是其计算的复杂度以及训练的速度是制约其在实时的计算机应用的主要原因.因此也非常非常多的算法被提出来.如SMO ...