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; 
}
相关推荐
遇乐的果园3 分钟前
前端学习笔记-vue列表处理
前端·vue.js·学习
倾颜8 分钟前
AI 聊天刷新后记录全丢?用浏览器本地存储给 AI Chat 加一层"离线记忆"
前端·aigc
梦想的旅途215 分钟前
企业微信API 实现企业微信消息的自动发送?
java·服务器·前端
何时梦醒17 分钟前
🤖 RAG 文档分割器(Splitter)深度学习笔记 —— 从零搭建知识库文档处理流水线
前端·javascript·人工智能
ss27325 分钟前
Vue 完整版本发展史时间线(2013–2026)|版本迭代里程碑+核心特性对照表
前端·javascript·vue.js
亿元程序员36 分钟前
为什么大家都那么喜欢用Shader?
前端
Codebee37 分钟前
OODER Studio设计工具导入体系深度解析
前端
weedsfly41 分钟前
前端开发中的命令模式——从点餐退单到异步任务调度
前端·javascript·面试
慢功夫42 分钟前
💡第四篇:编辑器内核, Monaco model、URI、dirty 状态和 tabs 是怎么协作的?
前端·visual studio code