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; 
}
相关推荐
摆烂工程师11 分钟前
2025年12月最新的 Google AI One Pro 1年会员教育认证通关指南
前端·后端·ai编程
Gavin在路上18 分钟前
DDD之用事件风暴重构“电商订单履约”(11)
java·前端·重构
我命由我1234524 分钟前
VSCode - VSCode 颜色值快速转换
前端·ide·vscode·前端框架·编辑器·html·js
前端涂涂38 分钟前
怎么设计一个加密货币 谁有权利发行数字货币 怎么防止double spending attack 怎么验证交易合法性 铸币交易..
前端
JuneTT38 分钟前
【JS】使用内连配置强制引入图片为base64
前端·javascript
前端涂涂44 分钟前
4.BTC-协议
前端
老前端的功夫1 小时前
移动端兼容性深度解析:从像素到交互的全方位解决方案
前端·前端框架·node.js·交互·css3
代码与野兽1 小时前
AI交易,怎么让LLM自己挑选数据源?
前端·javascript·后端
CC码码1 小时前
前端文本分割工具,“他”来了
前端·javascript·程序员
linhuai1 小时前
flutter实现Mock数据
前端