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; 
}
相关推荐
半个烧饼不加肉10 分钟前
JS 底层探究-- 事件循环
开发语言·前端·javascript
goDeep23 分钟前
useMemo 和 useCallback 的区别,我终于搞懂了
前端
小亮学前端24 分钟前
在1Panel中部署Nuxt项目
前端·vue.js
产品研究员27 分钟前
AI生成可用的React交互代码实测:Lovable vs Stitch vs Paico
前端·react.js·aigc
labixiong28 分钟前
Prompt 工程:当一段文字学会了思考、行动与统治
前端·ai编程
biubiubiu_LYQ31 分钟前
入门开发者必学篇之JS事件循环:为什么你的代码输出总翻车?
前端·javascript
程序员黑豆1 小时前
AI全栈开发之Java:怎么安装JDK
前端·ai编程·全栈
周杰伦fans1 小时前
AutoCAD C# 二次开发:如何精确监听工作空间切换事件
前端·c#
丷丩1 小时前
MapLibre GL JS第41课:向地图添加图标
前端·javascript·mapbox·maplibre gl js
英俊潇洒美少年1 小时前
前端性能优化:非关键脚本/第三方资源异步加载全解(彻底解决首屏阻塞)
前端·性能优化