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; 
}
相关推荐
zheshiyangyang1 小时前
前端面试基础知识整理【Day-7】
前端·面试·职场和发展
猫头虎1 小时前
web开发常见问题解决方案大全:502/503 Bad Gateway/Connection reset/504 timed out/400 Bad Request/401 Unauthorized
运维·前端·nginx·http·https·gateway·openresty
qq_24218863321 小时前
3389端口内网转发概述
前端·经验分享·html
伊泽瑞尔2 小时前
2025年终总结
前端·程序员·ai编程
uhakadotcom2 小时前
Hono v4.12.0 发布!路由提速2倍+,JSON响应飞起来
前端·面试·github
少云清2 小时前
【UI自动化测试】10_web自动化测试 _frame切换、多窗口切换
前端·web自动化测试
HelloReader2 小时前
做 IM 客户端,选 Tauri 还是 Qt一篇把坑讲清楚的选型与架构指南
前端
HelloReader2 小时前
Tauri 2 创建项目全流程create-tauri-app 一键脚手架 + Tauri CLI 手动接入
前端·javascript·vue.js
Full Stack Developme3 小时前
语法树与自动化技术
运维·前端·自动化
shix .3 小时前
旅行网站控制台检测
开发语言·前端·javascript