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; 
}
相关推荐
T畅N20 分钟前
审批流设计器(前端)
前端·elementui·vue·html·流程图·js
AlunYegeer25 分钟前
JAVA,以后端的视角理解前端。在全栈的路上迈出第一步。
java·开发语言·前端
IT_陈寒44 分钟前
Redis这个内存杀手,差点让我们运维半夜追杀我
前端·人工智能·后端
子兮曰1 小时前
DeepSeek TUI:原生 Rust 打造的终端 AI 编码 Agent
前端·javascript·后端
DFT计算杂谈1 小时前
自动化脚本一键绘制三元化合物相图
java·运维·服务器·开发语言·前端·python·自动化
子兮曰1 小时前
深入 Superpowers:180k Stars 的开源 AI 编程方法论是如何工作的
前端·javascript·后端
沸点小助手2 小时前
「新晋AI顶流PK:GPT-5.5 vs DeepSeek V4&掘友吐槽小会」沸点获奖名单公示|本周互动话题上新🎊
前端·人工智能
隔壁的大叔2 小时前
Markdown 渲染如何穿插自定义组件
前端·javascript·vue.js
Rik2 小时前
用 AI Skill 封装你的工作流:从代码规范到全流程提效实战
前端·后端
Dabei2 小时前
Android TV 焦点处理详解:遥控器与空鼠
android·前端