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; 
}
相关推荐
a11177620 分钟前
医院挂号预约系统(开源 Fastapi+vue2)
前端·vue.js·python·html5·fastapi
0思必得036 分钟前
[Web自动化] Selenium处理iframe和frame
前端·爬虫·python·selenium·自动化·web自动化
行走的陀螺仪2 小时前
uni-app + Vue3编辑页/新增页面给列表页传参
前端·vue.js·uni-app
We་ct3 小时前
LeetCode 205. 同构字符串:解题思路+代码优化全解析
前端·算法·leetcode·typescript
2301_812731414 小时前
CSS3笔记
前端·笔记·css3
ziblog4 小时前
CSS3白云飘动动画特效
前端·css·css3
越努力越幸运5084 小时前
CSS3学习之网格布局grid
前端·学习·css3
半斤鸡胗4 小时前
css3基础
前端·css
ziblog4 小时前
CSS3创意精美页面过渡动画效果
前端·css·css3
akangznl4 小时前
第四章 初识css3
前端·css·css3·html5