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. [luoguP3960] 列队(动态开点线段树)

    传送门 有splay的做法,有树状数组的做法... 最好理解的还是线段树的做法. 一开始我是这样想的,如果移动某一个人,只有当前行和最后一列会受到影响,感觉就像是个线段树,树状数组什么的. 然而接下来 ...

  2. SpringBoot消失的Web.xml

    Filter 过滤器作为web.xml中重要的一部分,有着相当高的出场率,SpringBoot会默认注册几个Filter ApplicationContextHeaderFilter Characte ...

  3. uva 11991 查询中容器的运用

    题目大意:一个n个整数的数组,m条查询指令.(1<=n,m<=100 000)每次询问第k个整数v的下标值,若不存在输出0. #include<iostream> #inclu ...

  4. CodeForces 303B Rectangle Puzzle II

    题意: 给定一个靠着坐标轴长为n,宽为m的矩形和 矩形中的一个点A,求在这个矩形内部一个 长宽比为a/b的小矩形,使这个小矩形的长宽尽量大使点A在小矩形内部,并且点A尽量靠近小矩形的中心 CF的思维题 ...

  5. 实战分析Tomcat的类加载器结构(使用Eclipse MAT验证)

    一.前言 在各种Tomcat相关书籍,书上都提到了其类加载器结构: 在Tomcat 7或者8中,共享类和Catalina类加载器在catalina.properties中都是没配置的,请看: 所以,c ...

  6. curl抓取数据

    抓取数据的代码: $url='抓取数据的网站路径'; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); //参数为1表示传输数据,为0表示 ...

  7. HDU - 5974 A Simple Math Problem (数论 GCD)

    题目描述: Given two positive integers a and b,find suitable X and Y to meet the conditions: X+Y=a Least ...

  8. 基于SSH+shiro+solr的家庭记账系统

    项目地址: https://github.com/jianghuxiaoao/homeaccount

  9. 社会信息化环境下的IT新战略

    我们现在所处的信息化环境正在发生改变,技术已经成为影响组织的最重要的外部力量,传统的正金字塔的结构被移动互联网深深改变:员工能够更加自由的获取信息,变成更多的信息链接,这种链接不光连接人和组织,还连接 ...

  10. oracle 导出数据字典

    一.查看当前用户下表名,及表名的备注 select * from user_tab_comments where table_name like 'T_ONLINE%' 二.查询数据字典 -- 1. ...