(如有错敬请指点,以下是我工作中遇到并且解决的问题)

效果图:

重点是把table设置为table-layout: fixed;

超出的文字隐藏的效果才有。

p标签超出的文字隐藏的效果不需要设置这个内容就可以有效果。

<table border="1">
<tbody>
<tr><td>1</td><td>fdsfsdafdsafsafdsfsdafdsafsafdsfsdafdsafsajghjgkghfjgfjgfjfgaa</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td></tr>
</tbody>
</table>
body{
margin: 0;
padding: 0;
width: 100%;
}
table{
border-collapse: collapse;
width: 96%;
margin: 0 2%;
table-layout: fixed;
}
tr{
width: 100%;
}
tr td{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-wrap: break-word;
}
tr td:nth-child(1),tr td:nth-child(3){
width: 20%;
}
tr td:nth-child(2){
width: 56%;
}

用css控制table td内文字超出隐藏的更多相关文章

  1. CSS实现table td中文字的省略与显示

    所谓省略就是把多余的字以“...”显示出来,而显示则是当鼠标移动到td上时,把省略的字重新显示出来.对于一个table,兼容IE与FF.Chrome的省略方式CSS写法: table{ width:2 ...

  2. CSS 控制table 滑动及调整列宽等问题总结

    一. 通过css控制table y方向上滚动 html中没有滚动条,可以根据overflow属性的scroll来对table显示不完全的内容进行滚动. 只是y方向上滚动,很简单,只要设置div的hei ...

  3. css控制table的td宽度

    今天发现即使设置table的td.th宽度,仍是不管用,是根据table的td的内容来适应宽度,导致其他的th.td丢失. 下图就是浏览器渲染的table,导致缺失"端口"这一列, ...

  4. td默认文字超出后显示..,点击tr时td文字显示完整

    做项目时,产品提的需求,table表格里面,每一列限制文字超出宽度后显示省略号,等点击td时,文字显示完整,今天整理了一下代码,积累一下 备注:1.邮箱和网址,在td里面不会自动换行,需要增加word ...

  5. Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

  6. CSS控制Span强制换行、溢出隐藏

    CSS控制Span强制换行 word-wrap: break-word; word-break: break-all; white-space: pre-wrap !important; 盒子文字设置 ...

  7. CSS实现不换行/自动换行/文本超出隐藏显示省略号

    在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...

  8. 【css】table标签内的td、th如何设置固定宽度,而不是自适应?

    table{ min-width: %; } td{ min-width: 100px; } .table-container{ overflow:auto; display: block; } &l ...

  9. 使用css控制table的cellspacing和cellpadding属性

    HTML默认的表格样式之间有间隙,每次为了解决这些问题,总要在table标签里添加cellspacing和cellpadding,你是否也很厌倦这样的写法, 那么有没有对应的CSS属性能达到相同的效果 ...

随机推荐

  1. urllib使用一

    urllib.urlopen()方法: 参数: 1.url(要访问的网页链接http:或者是本地文件file:) 2.data(如果有,就会由GET方法变为POST方法,提交的数据格式必须是appli ...

  2. Python 文本挖掘:使用情感词典进行情感分析(算法及程序设计)

    出处:http://www.ithao123.cn/content-242299.html 情感分析就是分析一句话说得是很主观还是客观描述,分析这句话表达的是积极的情绪还是消极的情绪.   原理 比如 ...

  3. ClassNotFountException 与 NoClassDefineError

    一 知识准备 NoClassDefFoundError:正如它们的名字所说明的是一个错误 (Error),而ClassNotFoundException是一个异常.正如上一章节所说Exception和 ...

  4. fromkeys语法/set集合/深浅拷贝/列表/字典的删除

    fromkeys语法: dic = {"apple":"苹果", "banana":"香蕉"} 返回新字典. 和原来的没 ...

  5. 算法学习记录-图——应用之关键路径(Critical Path)

    之前我们介绍过,在一个工程中我们关心两个问题: (1)工程是否顺利进行 (2)整个工程最短时间. 之前我们优先关心的是顶点(AOV),同样我们也可以优先关心边(同理有AOE).(Activity On ...

  6. android apk瘦身之 图片压缩 tinypng

    参考地址: http://blog.csdn.net/jy692405180/article/details/52409369 http://www.tuicool.com/articles/BraI ...

  7. DOM事件里封装方法eventUtil

    var eventUtil={ //添加句柄 addHandler:function (element,type,handler) { //element相当于btn2,type此时用的是click类 ...

  8. Column 'sort' specified twice错误

    我使用的是mybatis框架出现的这个问题,如果你们也出现了这个问题的豪华,我想你们的sql代码一定是复制的吧,额哈哈哈

  9. Tomcat详解及SNS系统的部署实现

    Tomcat详解及SNS系统的部署实现   http://jungege.blog.51cto.com/4102814/1409290

  10. Spring进阶—如何用Java代码实现邮件发送(一)

    相关文章: <Spring进阶—如何用Java代码实现邮件发送(二)> 在一些项目里面如进销存系统,对一些库存不足发出预警提示消息,招聘网站注册用户验证email地址等都需要用到邮件发送技 ...