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; 
}
相关推荐
deli0078 分钟前
为什么最近邻路线总在绕远?2-opt 把 50 城 TSP 缩短了 20.9%
前端
guslegend13 分钟前
底层数据设计:读写分离、分库分表与热点数据隔离
前端
Southern Wind14 分钟前
AIAgent——第一章:本地 Agent 与 Vue 3 流式全栈实战
前端·javascript·vue.js
可乐鸡翅yeah_23 分钟前
HLS 业务 Referer‑Policy 网页元标签引发播放异常排错
前端·javascript·网络·ffmpeg·php·音视频
jj_ccwgw23 分钟前
从 0 到 1 搭建 pnpm + Workspaces + Turborepo Monorepo 保姆级指南
前端·node.js
智驭未来掌门人24 分钟前
AI编程时代的设计系统落地指南:从分类选型到项目实战
前端
vipxieliang26 分钟前
深入理解 JavaScript 数据类型与类型转换
前端·javascript
用户157415681653432 分钟前
告别硬编码下拉选项:Vue 3 企业项目字典化改造实录
前端
明航咨询-陈老师35 分钟前
2026信创“硬门槛“解码:国测(Ⅲ级首现/首个Ⅱ级OS) × LS(LS1-4) 双资质实操对照
前端
前端snow40 分钟前
别再死磕单 Agent 了!多智能体架构 + LangGraph 实战,一篇全讲透
前端