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; 
}
相关推荐
世界哪有真情13 小时前
AI 写代码两年多,我发现自己越来越"看不进去"了
前端·后端·ai编程
星栈13 小时前
被 Rust async 纠正的三个异步认知
前端·后端·rust
前端_刘师兄13 小时前
前端开发工程师转FAE工程师路线规划
前端
禁止摆烂_才浅13 小时前
前端 AI 面试题
前端·面试·ai编程
程序员老赵13 小时前
Docker 部署 ZLMediaKit:轻松搭建高性能流媒体服务平台
前端·javascript·后端
Liora_Yvonne13 小时前
为什么每次发版,总有用户看到白屏?
前端
风月说与山鬼13 小时前
四、浏览器存储
前端·vue.js
hunterandroid13 小时前
[Android 从零到一] ViewPager2 与 Fragment 生命周期协同:从预加载到状态一致性
android·前端
cindershade13 小时前
别盯着 dist:Vite 应用的下载与执行成本治理闭环
前端
拾年27513 小时前
前后端分离开发,别再"傻等"后端接口了——聊聊前端接口工程
前端·javascript·react.js