用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属性能达到相同的效果 ...
随机推荐
- 笔记-selenium+chrome headless
笔记-selenium+chrome headless 1. selenium+chrome headless phantomjs与selenium分手了,建议使用其它无头浏览器. chro ...
- 笔记-爬虫-XPATH
笔记-爬虫-XPATH 1. xpath XPath是W3C的一个标准.它最主要的目的是为了在XML1.0或XML1.1文档节点树中定位节点所设计.目前有XPath1.0和XPath2.0两 ...
- TouTiao开源项目 分析笔记13 最后一个订阅号的实现主页面
1.实现订阅号的基础类 1.1.本地订阅号的Bean类==>MediaChannelBean public class MediaChannelBean implements Parcelabl ...
- 3 web框架
web框架 Web框架(Web framework)是一种开发框架,用来支持动态网站.网络应用和网络服务的开发.这大多数的web框架提供了一套开发和部署网站的方式,也为web行为提供了一套通用的方法. ...
- WPF系列教程——(三)使用Win10 Edge浏览器内核 - 简书
原文:WPF系列教程--(三)使用Win10 Edge浏览器内核 - 简书 在需要显示一些 H5网站的时候自带的WebBrowser总是显示不了,WebBrowser使用的是IE内核,许多H5新特性都 ...
- 设计模式--单例模式Singleton
单例模式顾名思义整个程序下只有一个实例,例如一个国家只有一个皇帝,一个军队只有一个将军.单例模式的书写又分为饿汉模式和懒汉模式 饿汉模式 类中代码 package demo; public cla ...
- VSX-3 VSCT文件
关于VSPackage中的VSCT,算是VSX开发中比较重要的一个成员. 我这里给出LearnVSXNow!系列文章关于VSCT的链接,除了#14有译文. #14 #18 #25 看完上面几篇文章,也 ...
- 剑指Offer - 九度1507 - 不用加减乘除做加法
剑指Offer - 九度1507 - 不用加减乘除做加法2013-11-29 20:00 题目描述: 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 输入: 输入可能包 ...
- 《Cracking the Coding Interview》——第1章:数组和字符串——题目8
2014-03-18 02:12 题目:判断一个字符串是否由另一个字符串循环移位而成. 解法:首先长度必须相等.然后将第一个串连拼两次,判断第二个串是否在这个连接串中. 代码: // 1.8 Assu ...
- CodeIgniter学习笔记五:分页,文件上传,session,验证码
一.分页 示例代码: //装载类文件 $this -> load -> library('pagination'); $controller = $this->router-> ...