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; 
}
相关推荐
掘金酱9 分钟前
TRAE Work 实战帮征文 | 获奖名单公示
前端·人工智能·后端
陆枫Larry15 分钟前
Chromium和Chrome到底是什么关系?
前端
a11177619 分钟前
模仿刀剑神域风格 作品集网页
前端·开源
a11177622 分钟前
Elemental Sandbox(元素沙盒)-Three.js 游戏技能特效
前端·开源
用户693717500138427 分钟前
前阵子刷屏的 Ox-Alpha 真身揭晓!GLM-5.3-Flash 上线,这价格真的杀疯了
前端·后端·github
四千岁33 分钟前
抓包LangChain-了解LangChain的原理
前端·javascript·后端
南雨北斗33 分钟前
TS方式构建Vue3 toast组件(一)
前端
IT小白杨35 分钟前
2026游戏工作室环境隔离指南:从设备指纹到移动IP的部署实践
前端·经验分享·网络协议·tcp/ip·游戏·安全架构·指纹浏览器
用户2986985301440 分钟前
使用 JavaScript 在 React 中实现 Word 转 PDF
前端·javascript·react.js
hunterandroid1 小时前
[鸿蒙从零到一] @Observed 与 @ObjectLink 深层响应陷阱与最佳实践
前端