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; 
}
相关推荐
qiyue774 分钟前
AI浪潮下,前端的路在何方,附前端转KMP实践
前端·ai编程
Moment4 分钟前
历史性突破!LCP 和 INP 终于覆盖所有主流浏览器,iOS 性能盲点彻底消失
前端·javascript·面试
小小荧6 分钟前
Hono与Honox一次尝试
前端·后端
菩提小狗20 分钟前
第2天:基础入门-Web应用&架构搭建&漏洞&HTTP数据包&代理服务器|小迪安全笔记|网络安全|
前端·安全·架构
咖啡の猫29 分钟前
Python集合生成式
前端·javascript·python
QT 小鲜肉39 分钟前
【Linux命令大全】001.文件管理之mtoolstest命令(实操篇)
linux·运维·前端·笔记·microsoft
holeer42 分钟前
React UI组件封装实战——以经典项目「个人博客」与「仿手机QQ」为例
前端·javascript·react.js·ui·前端框架·软件工程
chilavert3181 小时前
技术演进中的开发沉思-277 AJax :Calendar
前端·javascript·microsoft·ajax
debug 小菜鸟1 小时前
搭建web 环境的那些事
前端
鹏多多1 小时前
Flutter下拉刷新上拉加载侧拉刷新插件:easy_refresh全面使用指南
android·前端·ios