用css控制table td内文字超出隐藏
(如有错敬请指点,以下是我工作中遇到并且解决的问题)
效果图:

重点是把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内文字超出隐藏的更多相关文章
- CSS实现table td中文字的省略与显示
所谓省略就是把多余的字以“...”显示出来,而显示则是当鼠标移动到td上时,把省略的字重新显示出来.对于一个table,兼容IE与FF.Chrome的省略方式CSS写法: table{ width:2 ...
- CSS 控制table 滑动及调整列宽等问题总结
一. 通过css控制table y方向上滚动 html中没有滚动条,可以根据overflow属性的scroll来对table显示不完全的内容进行滚动. 只是y方向上滚动,很简单,只要设置div的hei ...
- css控制table的td宽度
今天发现即使设置table的td.th宽度,仍是不管用,是根据table的td的内容来适应宽度,导致其他的th.td丢失. 下图就是浏览器渲染的table,导致缺失"端口"这一列, ...
- td默认文字超出后显示..,点击tr时td文字显示完整
做项目时,产品提的需求,table表格里面,每一列限制文字超出宽度后显示省略号,等点击td时,文字显示完整,今天整理了一下代码,积累一下 备注:1.邮箱和网址,在td里面不会自动换行,需要增加word ...
- Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示
一.设置文字超出宽度显示省略号 注意点: 1. 需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...
- CSS控制Span强制换行、溢出隐藏
CSS控制Span强制换行 word-wrap: break-word; word-break: break-all; white-space: pre-wrap !important; 盒子文字设置 ...
- CSS实现不换行/自动换行/文本超出隐藏显示省略号
在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...
- 【css】table标签内的td、th如何设置固定宽度,而不是自适应?
table{ min-width: %; } td{ min-width: 100px; } .table-container{ overflow:auto; display: block; } &l ...
- 使用css控制table的cellspacing和cellpadding属性
HTML默认的表格样式之间有间隙,每次为了解决这些问题,总要在table标签里添加cellspacing和cellpadding,你是否也很厌倦这样的写法, 那么有没有对应的CSS属性能达到相同的效果 ...
随机推荐
- python开发基础之字符编码、文件处理和函数基础
字符编码 为什么要有字符编码? 字符编码是为了让计算机能识别我们人写的字符,因为计算机只认识高低电平,也就是二进制数"0","1". 一个文件用什么编码方式存储 ...
- AD高级规则设置
inpolygon 是所有的覆铜 ispad 是焊盘到焊盘的间距 IsVia 过孔间距 ispad and InComponent('S1') 设置某个器件的焊盘间距规则 ispad and H ...
- CodeForces 771C Bear and Tree Jumps 树形DP
题意: 给出一棵树,一个人可以在树上跳,每次最多跳\(k(1 \leq k \leq 5)\)个点 定义\(f(s,t)\)为从顶点\(s\)跳到顶点\(t\)最少需要跳多少次 求\(\sum\lim ...
- sourceInsight *** more bytes are required
现象:用sourceinsight修改的文件无法保存,提示 No enough space to save "XXX", xxx more bytes are required. ...
- 孤荷凌寒自学python第二十一天初识python的类
孤荷凌寒自学python第二十一天初识python的类 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) 类是面向对象的编程语言非常重要的概念. 编程语言的进化史中从顺序编程到结构化编程,最后才 ...
- 团队项目-任务分解[Alpha0]
团队项目-任务分解[Alpha0] 标签(空格分隔): 团队博客 适用范围: 本文档 适用对象 团队全体成员 适用时间 alpha阶段第一周计划 10.24-10.28 适用内容 目标.分工.时长估计 ...
- 第三节 MVC应用程序架构和测试
在查看如何测试单个功能之后,您可能会问,整个Web应用程序如何? 如前所述,有以下级别的测试: 单元测试 集成测试 功能测试 在开始编写测试时考虑这一点很重要. 可能还有其他类型的测试,但现在让我们关 ...
- java 计算精度处理
1.设计思想: 定义两个字符串number1和number2,分别输入一串数字,然后定义两个BigDecimal类的对象f1,f2分别接收number1和number2的值,然后调用BigDecima ...
- sqlalchemy presto 时间比较
大数据统计时,需要计算开仓订单减掉经纪商时间差,等于n 小时 或 星期几的订单. presto sql语句如下: select sum(profit) from t_table where open_ ...
- RabbitMQ-Java客户端API指南-下
RabbitMQ-Java客户端API指南-下 使用主机列表 可以将Address数组传递给newConnection().的地址是简单地在一个方便的类com.rabbitmq.client包与主机 ...