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; 
}
相关推荐
晚安日记wanna1 分钟前
四年前端被问 Code Review90人只看得懂空格和命名
前端·面试
IPdodo_5 分钟前
curl 如何测试代理 IP?HTTP、SOCKS5 与认证参数示例
前端·网络·python·https·网络调试
做前端的娜娜子7 分钟前
施工蓝图:vite.config.js —— 项目的指挥中心
前端·react native·vite
宸翰8 分钟前
解决uni-app 中 SVG 图片在 iOS 端显示模糊问题
前端·uni-app
数据掘金8 分钟前
第三方 SDK 集体故障时,你的 App 会怎样?可落地的监控与降级方案
前端
AI分享猿19 分钟前
UI设计Prompt系列(十七):团队如何管理UI Prompt——减少产品、设计与开发之间的信息损耗
前端·prompt
资讯综合23 分钟前
2026全国云渲染网站排名 不同需求用户适配榜单
开发语言·前端·javascript
PHP实战开发录40 分钟前
PHP接口超时后为什么任务还在跑
开发语言·前端·php·开发
今天AI了吗1 小时前
2026年三大AI桌面智能体横评:Codex vs Hermes vs WorkBuddy
大数据·前端·css·人工智能·架构
kill5221 小时前
interface vs type:到底该用哪个
前端