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. [luoguP2518][HAOI2010]计数(数位DP)

    传送门 重新学习数位DP.. 有一个思路,枚举全排列,然后看看比当前数小的有多少个 当然肯定是不行的啦 但是我们可以用排列组合的知识求出全排列的个数 考虑数位dp 套用数位dp的方法,枚举每一位,然后 ...

  2. 刷题总结——疫情控制(NOIP2012提高组)

    题目: 题目背景 NOIP2012 提高组 DAY2 试题. 题目描述 H 国有 n 个城市,这 n 个城市用 n-1 条双向道路相互连通构成一棵树,1 号城市是首都,也是树中的根节点. H 国的首都 ...

  3. django 和 mongdb 写一个简陋的网址,以及用django内置的分页功能

    https://github.com/factsbenchmarks/simple_websit_about_58 一 设置 数据库的设置 在settings文件中加入这样一段代码: from mon ...

  4. iOS APP 架构漫谈[转]

      Mark  一下 很不错的文章   最近看了一些有关server的东西,一些很简单的东西,不外乎是一些文档规范,另外结合最近看的wwdc的一些video,觉得对软件架构(software arch ...

  5. 三种Model模式

    目前项目中可能出现的三种Model模式,对于我们现在开发的一个项目,我觉得使用DDD的思想来设计模型比较清晰,使用DDD的思想把模型model分成了如下三种:ViewModel,它与页面相关,Doma ...

  6. [BOI2007] Sequence

    题目描述 对于一个给定的序列a1, …, an,我们对它进行一个操作reduce(i),该操作将数列中的元素ai和ai+1用一个元素max(ai,ai+1)替代,这样得到一个比原来序列短的新序列.这一 ...

  7. matlab安装及破解

    Matlab安装及破解: 笔者最近要做一些和建模相关的事,故此需要安装Matlab2017版.在此做下笔记. 网盘链接: 链接:https://pan.baidu.com/s/1lN8C7TDFjSV ...

  8. TFS2018 获取所有Build变量及变量值

    添加一个Command Line 步骤,Tool设置为 cmd ,并设置参数为 /k set 注意:若在执行时出现如下报错信息,Tool的值改成 cmd.exe --20T02::.0416435Z ...

  9. [置顶] MySQL -- 创建函数(Function

    目标 如何在MySQL数据库中创建函数(Function) 语法 CREATE FUNCTION func_name ( [func_parameter] ) //括号是必须的,参数是可选的 RETU ...

  10. 【Todo】ES6学习

    今天部分分享,有一篇PPT,放在这里了 /Users/baidu/Documents/Data/Work/分享资料/ES6大法好.pptx 内容挺丰富的,可以学习.