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; 
}
相关推荐
user20585561518131 分钟前
Windows 项目安装时报 `node-sass` 错误,如何快速处理
前端
LiaCode2 分钟前
Redis 在生产项目的使用
前端·后端
LiaCode7 分钟前
一天学完 redis 的爽翻版核心知识总结
前端·后端
大刚测试开发实战8 分钟前
如何内网穿透访问本地私有化部署的TestHub
前端·后端·github
风骏时光牛马20 分钟前
# Ruby基于Rails框架实现多角色权限管理与数据分页查询完整实战代码案例
前端
weedsfly23 分钟前
迭代器、生成器与异步迭代——让数据“按需流动”的艺术
前端·javascript
xiaodaoluanzha27 分钟前
迄今為止,最簡單的編程語言 Nolang
前端·后端
Csvn29 分钟前
Fetch 请求竞态终结者:AbortController 不只是用来"取消"的
前端
阡陌Jony30 分钟前
关于前端路由中的参数问题的学习(一): params,query, hash(#)
前端
阡陌Jony31 分钟前
缓存相关学习笔记(一):Service Worker 缓存
前端