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

效果图:

重点是把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. 把SmartForm转换成PDF

    摘要:将SmartForm转换为PDF的过程包括3个简单步骤. 调用智能窗体,然后返回OTF数据. 使用“转换”功能模块将OTF数据转换为所需格式. 下载文件 呈现宏“code”时出错:为参数“lan ...

  2. pdfmake实现中文支持,解决中文乱码问题

    引言:当初自己为了在项目中bootstrap-table中实现导出pdf,使用的pdfmake,但是pdfmake默认使用的不是中文字体,实现pdfmake使用中文字体主要就是编译新的vfs_font ...

  3. 云计算之路-阿里云上:OCS问题的进展以及11:30-11:50遇到的问题

    (上图是今天出问题期间Web服务器性能监控图,紫色表示的是Request Execution Time) 昨天我们发布了一篇博客分享了我们这两天遇到的OCS(开放缓存服务)问题,详见云计算之路-阿里云 ...

  4. 初学JS——利用JS制作的别踩白块儿(街机模式) 小游戏

    这个是上个星期5写的了,当时是突然想写个游戏,就想到了别踩白块儿,当时的想法是 可能普通模式的别踩白块儿因为他的“块儿”是滚动的向上这种,以我目前会的技术想不出怎么写, 但是如果是街机模式,通过你每按 ...

  5. appium-desktop 环境搭建 Java版

    用的是appium-desktop1.8.1,testng6.11,java-client6.1.0,selenium-java3.13.0 1.下载逍遥模拟器,装好app 2.下载adb,用adb连 ...

  6. 【转载】Unity3D研究院transform.parent = parent坐标就乱了

    昨天有朋友问我了一个问题,它将Hierarchy视图里的某个子节点下的GameObject拷贝到另外一个对象的子节点下面,他使用的方法就是 transform.parent = parent 但是拷贝 ...

  7. Python全栈 MySQL 数据库 (SQL查询、备份、恢复、授权)

    ParisGabriel              每天坚持手写  一天一篇  决定坚持几年 为了梦想为了信仰    开局一张图   今天接着昨天的说   索引有4种:      普通 索引 :ind ...

  8. springbootDay03 cookie和session 购物车技术

    一.会话技术 1. 什么是会话 在计算机术语中,会话指的是客户端和服务器交互通讯的过程.简单的理解,大家可以看成是两个普通的人在打电话.一次电话从通话开始到挂断,可以看成是会话. 会话的特征 会话能够 ...

  9. 第二阶段团队冲刺-four

    昨天: 绘制logo. 今天: 用servlet完成名单打印功能. 遇到的问题: servlet中的获得的路径不是想要的.

  10. 会话管理 session实现多页面传输数据

    以下面购物车几个页面传输数据为例html页面有index.html <!DOCTYPE html> <html lang="en"> <head> ...