zoukankan      html  css  js  c++  java
  • table文字溢出显示省略号问题

    每日金句

    『专注做一件事』

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

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

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

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

    工作总结

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

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

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

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

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

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

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

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

     100px;
    

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

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

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

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

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

    如何处理呢?解决办法:

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

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

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

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

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

    继续修bug 啊修 bug...

    道廷途说

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

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

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

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

    点个赞,证明你还爱我

  • 相关阅读:
    Vue部署到相对目录和解决刷新404的问题
    JavaScript时间格式转换
    在Vue中使用Chart.Js
    进制转换和大数除法
    esp8266必备知识
    php 添加 freetype支持
    Linux系统时间同步问题
    busybox date 时间的加减
    kubesphere-wokespaces
    添加系统环境变量
  • 原文地址:https://www.cnblogs.com/lvonve/p/14180233.html
Copyright © 2011-2022 走看看