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; 
}
相关推荐
乘风gg14 小时前
9 张 AI 生成的图,吃透任何一个前端项目
前端·ai编程·claude
moonsims15 小时前
低空量子无人机
前端·数据结构
breeze jiang15 小时前
React + WebGPU 在浏览器运行 DeepSeek:从 Worker 通信到流式生成
前端·javascript·react.js
a11177615 小时前
家居生成器 Cartoon 开源项目 3D web
前端·开源
小林ixn15 小时前
前端卡顿终结者:用 useRef 把 Web Worker 请进 React 项目
前端·react.js·前端框架
sunly_15 小时前
React 三个重要概念:Ref、Props、State 详解
前端·javascript·react.js
weixin_4316004415 小时前
前端对接 SSE 的两种常见方式
前端·后端·学习·ai·sse·nest.js
Mh15 小时前
如何使用GSAP实现一个 `pinned` 滚动楼层叙事?
前端·javascript·css
用户938515635071 天前
从零在浏览器里跑 DeepSeek-R1:WebGPU + Transformer.js 全链路实战
前端·设计模式·typescript
CodeSheep1 天前
稚晖君公司人事大变动,来了!
前端·后端·程序员