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; 
}
相关推荐
用户713874229006 分钟前
浏览器安全机制与现代 SPA 认证架构深度解析
前端
Momo__7 分钟前
Node Modules Inspector:Vue 团队出品的依赖分析神器
前端·vue.js·npm
kisshyshy8 分钟前
从零搭建全栈应用:模块化思想 + 语义化HTML + JSON‑Server快速Mock
前端
yamsfeer10 分钟前
电商自动化支付全链路技术拆解:从Playwright到扫码支付的底层原理
前端
DongWook10 分钟前
WangEditor渲染标签自定义属性的探索
前端
沙漠11 分钟前
React Native-SyncFormatEdittext:用 JSI 实现零闪烁的实时文本格式化
前端·react native
超人气王12 分钟前
JavaScript新手基础入门——this指针指向,一文带你搞清楚
前端·javascript
码上有光19 分钟前
c++模板进阶知识讲解(对模板的进一步的运用与理解)
java·前端·c++·特化·模板进阶·偏特化
嘟嘟071720 分钟前
Python切片技巧×DeepSeek API:手把手教你打造智能商品文案生成器
前端·javascript
环境工程笔记22 分钟前
给 Agent 浏览器任务加一个 Verification Gate:遇到验证页时该如何优雅暂停
前端