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; 
}
相关推荐
Sayai12 小时前
不重新打包,vim 直接改 jar 包内的前端文件:原理、步骤与避坑
前端·vim·jar
IT_陈寒12 小时前
SpringBoot自动配置失效时我差点把电脑扔了
前端·人工智能·后端
何何____12 小时前
web方向js考核题解
开发语言·前端·javascript
风骏时光牛马12 小时前
AI面试复盘:沉淀经验,找准求职短板
前端
liangshanbo121512 小时前
面试题终极整理:手写 Promise.all / Promise.allSettled
前端·javascript·promise
心易行者12 小时前
用HTML在线运行搭后台管理系统:5个核心模块+0服务器,3天跑通完整业务
大数据·前端·网络·人工智能·python
单线程1213813 小时前
从案例分析 Vue3 Tokenizer+Parser 源码五
前端·javascript·vue.js
神奇的程序员13 小时前
Apple Watch S12,送一台
前端
moonsims14 小时前
Voliro 无人机-Aerial Mobile Robot(空中移动机器人):把无人机从“飞过去拍摄”,升级成“飞过去并与目标物理接触、测量甚至操作”
前端·人工智能·安全·无人机·量子计算
晴天1615 小时前
Chrome 控制台(DevTools)竟是用 HTML 写的?-Day41
前端·chrome·html