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; 
}
相关推荐
不可能片场4 分钟前
Electron 发布进程被回收 用脱离进程组托住
前端·electron
kaixin_learn_qt_ing10 分钟前
hexdump -C /path/to/binary | less 看十六进制内容
前端·css·less
java1234_小锋12 分钟前
【技术专题】HTML5 网页技术 - HTML5 链接与图片
前端·html·html5
sun_weitao14 分钟前
Chrome 扩展插件开发指南
前端·javascript·chrome
小马不起床31 分钟前
零基础玩转 FastAPI_12:前端详情增强与角色权限分配
前端·状态模式·fastapi
前端snow42 分钟前
ai agent --- 切割文件 RecursiveCharacterTextSplitter
前端
松就是我902981 小时前
可编辑 PPT:调研、设计与实施方案
前端
前端snow1 小时前
ai agent --- Elasticsearch 混合检索
前端
java1234_小锋1 小时前
【技术专题】HTML5 网页技术 - HTML5 文本与排版标签
前端·html·html5
Wokoo71 小时前
Selenium:元素定位、动态适配与性能优化(二)
前端·selenium·自动化