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; 
}
相关推荐
别惊醒渔人1 小时前
Vue3 Diff 优化:最长递增子序列 LIS
前端·javascript·vue.js
颜酱1 小时前
07 | 把字段与指标同步到 Qdrant(生成阶段)
前端·人工智能·后端
用户059540174462 小时前
把AI长期记忆测试从手动验证换成pytest,2天揪出11个隐藏Bug
前端·css
lichenyang4533 小时前
从 Vite 空项目到 AIGC 图片工作台:我如何打通生图、任务轮询、生成库与 Canvas 动态特效
前端·人工智能
泡沫冰@3 小时前
上章节中文件的讲解
前端·网络·nginx
进击的丸子3 小时前
APP人脸识别增值版Harmony Demo实操与关键代码解析
前端·程序员·harmonyos
a1117764 小时前
唯美花朵风格的黑胶唱片音乐播放器
前端·css·css3
Hilaku4 小时前
工作 5 年后,决定你薪资上限的究竟是什么?
前端·javascript·程序员
爱分享的程序猿-Clark4 小时前
【前端分享】vue3 有 keep-alive属性吗?
前端
Revolution614 小时前
页面更新后为什么出现 Loading chunk failed:旧页面如何请求了已删除的构建产物
前端·面试·前端工程化