CSS(ellipsis) 用百分比宽度将字符串溢出部分显示为省略号

通常使用 ellipsis 将溢出部分显示为省略号必须给出指定像素宽度(width:200px),这样不方便共享响应式的样式定义,经过查资料,可以用 CSS 的 calc() 函数实现。

css 复制代码
table > tbody > tr > td.file > a {
    display: inline-block;
    height: 45px;
    padding-left: 46px;
    background-repeat: no-repeat;
    margin-top: 10px;
    margin-bottom: 10px;
    width: calc(50%);
    overflow: hidden; 
    text-overflow: ellipsis;
    white-space: nowrap; 
}
相关推荐
张可爱6 分钟前
ES6奶茶铺版通俗笔记 🍵✨
前端
用户877244753966 分钟前
Lubanno7UniverSheet:选择命令式,为了真正的跨框架通用
前端
Aoda12 分钟前
从痛点到落地:PawHaven 的 Monorepo 架构设计
前端·javascript
望获linux15 分钟前
【实时Linux实战系列】使用 u-trace 或 a-trace 进行用户态应用剖析
java·linux·前端·网络·数据库·elasticsearch·操作系统
zxg_神说要有光22 分钟前
我好像找到了最适合我的生活状态
前端·javascript
飞哥数智坊26 分钟前
今天,我的个人网站正式上线了!
前端
念念不忘 必有回响44 分钟前
前端自动化部署全流程(Jenkins + Nginx)
前端·自动化·jenkins
爱上妖精的尾巴1 小时前
5-22 WPS JS宏reduce数组的归并迭代应用(实例:提取最大最小值的记录)
服务器·前端·javascript·笔记·wps·js宏
IT_陈寒1 小时前
Java性能调优:这5个被你忽略的JVM参数让你的应用吞吐量提升50%!
前端·人工智能·后端
叶梅树2 小时前
从零构建量化学习工具:动量策略(Momentum Strategy)
前端·后端·机器学习