前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >table文字溢出显示省略号问题

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

作者头像
Daotin
发布2022-05-09 20:57:17
1.1K0
发布2022-05-09 20:57:17
举报

每日金句

『专注做一件事』

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

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

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

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

工作总结

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

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

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

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

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

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

代码语言:javascript
复制
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;

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

代码语言:javascript
复制
width: 100px;

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

代码语言:javascript
复制
display: block;或者display: inline-block;

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

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

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

如何处理呢?解决办法:

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

代码语言:javascript
复制
table {  width: 100%;  table-layout:fixed;}

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

代码语言:javascript
复制
td {  width: 100px;  display: inline-block;  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;}

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

继续修bug 啊修 bug...

道廷途说

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

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

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

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-12-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档