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

效果图:

重点是把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. TouTiao开源项目 分析笔记8 图解分析数据加载方式

    1.整体构架 1.1.以一个段子页面为例,列出用到的主要的类,以图片的方式展示. 1.2.基础类 这里最基础的接口有:   IBaseView<T>==>定义了5个方法. 然后最基础 ...

  2. [EXCEL]使用技巧随记

    1.比对两列中是否有重复项(B列中是否和A列重复) =IF(COUNTIF(A:A,B1)=0,"不重复","重复") Excel中用vlookup函数来对比两 ...

  3. 使用Oracle绿色客户端(InstantClient)连接远程Oracle的配置方法

    非常简单的配置,网上一搜,有很多,但是还是想记录下来,说不定以后需要了,直接进自己的博客看看也好啊. 下载了PLSQL Developer 11,安装好了发现不能连接远程数据库,但是又不想安装orac ...

  4. Centos在VMware虚拟机上的网络配置一记

    症状:配置好了IP, ping  127.0.0.1   ok ping  10.0.0.1   ok ping  外网IP,域名     network is unreachable ------- ...

  5. node.js和npm的安装

    1.进入node.js官方网站,下载和系统对应的版本,我下载的是这个最新版本:node-v8.2.1-x64.msi https://nodejs.org/en/download/ 2.windows ...

  6. nginx 快速查看配置文件的方法

    查看nginx实际调用的配置文件 1.查看nginx路径 ps aux|grep nginx root ?? S :43上午 :00.08 nginx: worker process root ?? ...

  7. Oracle 插入数据时获取系统时间

    insert into table_xx (xx,dateTime) values( 'xx',sysdate) 这个sysdate 相当于sql server中的GETDATE()函数 另to_ch ...

  8. Opencv2.4.13.6安装包

    这个资源是Opencv2.4.13.6安装包,包括Windows软件包,Android软件包,IOS软件包,还有opencv的源代码:需要的下载吧. 点击下载

  9. CodeSimth - .Net Framework Data Provider 可能没有安装。解决方法[转载 ]

    原文:http://www.cnblogs.com/chenrui7/p/3592082.html 今天想使用CodeSimth生成一个sqlite数据库的模板.当添加添加数据库的时候发现: .Net ...

  10. DB2数据库的日志文件管理

    DB2数据库的日志文件管理 DB2的日志模式 1.1循环日志 当循环日志生效时,事务数据将通过循环的方式写入主要日志文件.当存储于某个日志文件中的所有记录都不再需要用于恢复时,该日志文件将被重用,并且 ...