table文字溢出显示省略号问题

每日金句

『专注做一件事』

2009 年的《麻省理工科技评论》（MIT TechnologyReview）中有一篇文章写道，人脑的带宽只有区区60比特/ 秒，是（那个年代）上网带宽的十万分之一。

我看到的对于人脑带宽最高的估计，不过每秒上千比特。照这个速度传一幅手机图片，大约需要一小时。

由于生理上的局限，人在某一时刻只能接收、保留和处理少量的信息。如果一心多用，不仅不能多做事情，反而会因为来回切换任务而降低工作效率，还容易导致错误不断。

人的潜意识总认为自己能行，还能挤压时间同时处理很多任务，但这只是一厢情愿。当脑子里的任务积压过度，一开始可能只是出现一些小错误，当有限的脑力跟不上一心多用的野心，任务积压得越来越多时，大问题就会集中爆发。

工作总结

1、今天都完成了哪些工作？

新任务已经全部做完了。现在都在修 bug...，一堆 bug，有的还需要UI 重新画......

2、我在工作中遇到了哪些问题？又是怎么解决的？收获有哪些？

table文字溢出显示省略号问题

今天遇到一个css样式问题：

如题，在table里面，th 的文字如果太长的话，想要显示省略号会使用下面三行代码：

overflow: hidden;text-overflow: ellipsis;white-space: nowrap;

使用这三行代码的话，需要设置一个宽度：

width: 100px;

但是th是行内元素，直接设置width是无效的。必须加入:

display: block;或者display: inline-block;

因为想让所有的th都一行排列，所以应该加入 display:inline-block ；但是加入后却换行显示了：

怎么回事呢？inline-block 不是变成行内块的形式一行显示吗？

经过查询知道，inline-block是包含空格、换行符的，所以会导致inline-block产生间距，即会出现换行。

如何处理呢？解决办法：

table 设置属性宽度和 table-layout:fixed;

table {  width: 100%;  table-layout:fixed;}

注意：table必须设置 table-layout:fixed; ，文字溢出省略才能生效；然后，th再进行如下设置即可：

td {  width: 100px;  display: inline-block;  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;}

3、明天我要做哪些事情？

继续修bug 啊修 bug...

道廷途说

今天看到一个新闻是美团会员割用户韭菜，同一家外卖，同一个配送位置，同一个下单时间，美团外卖的派送费比非会员要高。

虽然后面美团回应称会员与非会员配送费的差异是由于定位缓存导致的，用户实际下单的时候会按照真实配送地址准确计算的。

这个你们信吗？网上爆料的大数据杀熟的情况还少吗？之前某滴不也是出现过相同的时间，打车到相同的位置，老用户比新用户更贵的情况吗？还有某程买高价机票的事等等。网上随便一搜就有很多的案例，而官方也总会找到各种各样的理由来应付你。

想想最近大火的「社区团购」，它会不会又是一把霍霍的镰刀？

点个赞，证明你还爱我

table文字溢出显示省略号问题相关推荐

qtreewidgetitem 文字内存太长换行_table文字溢出显示省略号问题
每日金句『专注做一件事』2009 年的<麻省理工科技评论>(MIT TechnologyReview)中有一篇文章写道,人脑的带宽只有区区60比特/ 秒,是(那个年代)上网带宽的十万分之 ...
HTML+CSS：移动端分辨率、视口、Flex布局、文字溢出显示省略号、溢出两行显示省略号
文章目录一.分辨率分类二.视口三.Flex布局 3.1 justify-content 主轴对齐方式 3.2 align-items 侧轴的对齐方式 3.3 伸缩比 flex:value; 3. ...
CSS 多行文字溢出显示省略号效果
.box1{width: 100px;/* height: 100px; */border: 1px solid #ccc;overflow: hidden;text-overflow: ellips ...
CSS 文字溢出显示省略号
溢出显示省略号的代码:其中 1 是行数. overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-c ...
CSS 强制不换行，文字溢出显示省略号~
1. 强制不换行 white-space: nowrap; 文本强制不换行: text-overflow:ellipsis; 文本溢出显示省略号: overflow:hidden; 溢出的部分隐藏: ...
css表格省略号,CSS 文本和表格中文字溢出显示省略号
一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 * ...
CSS中让文字溢出显示省略号
第一种方法 display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vert ...
HTML文字溢出显示省略号和鼠标放在文字上显示全部文字信息
代码 <div th:title="${stampDetail.stampData}" style="white-space: nowrap;overflow: h ...
单行和多行文字溢出显示省略号
单行一般加这个三个属性即可 overflow:hidden; text-overflow: ellipsis; white-space: nowrap; 多行需加下面属性 display: -webk ...

table文字溢出显示省略号问题

table文字溢出显示省略号问题相关推荐

最新文章

热门文章