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; 
}
相关推荐
Mintopia7 分钟前
计算机图形学学习指南
前端·javascript·计算机图形学
Mintopia7 分钟前
three.js 中的动画(animation)
前端·javascript·three.js
AI大模型顾潇9 分钟前
[特殊字符] Prompt如何驱动大模型对本地文件实现自主变更:Cline技术深度解析
前端·人工智能·llm·微调·prompt·编程·ai大模型
小小小小宇20 分钟前
React中 useEffect和useLayoutEffect源码原理
前端
AlexJee22 分钟前
在vue3中使用vue-cropper完成头像裁剪上传图片功能
前端
清晨細雨24 分钟前
uniapp微信小程序:WIFI设备配网之TCP/UDP开发AP配网
前端·物联网·小程序·uni-app
阿廖沙102425 分钟前
Rust核心概念
前端
阿廖沙102427 分钟前
🚀 从“值放哪了”聊起:Rust 内存管理通透讲解(适合前端工程师)
前端
打野赵怀真28 分钟前
如何提高前端应用的性能?
前端·javascript