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; 
}
相关推荐
kylinmin7 分钟前
卸载微软电脑管家:一次性彻底移除
前端·ui·xhtml
qq_4275060816 分钟前
基于Vue 3和Element Plus利用h、render函数写一个简单的tooltip局部or全局指令
前端·javascript·vue.js
泥菩萨^_^29 分钟前
【每天认识一个漏洞】React 和 Next.js RCE漏洞
前端·javascript·react.js
1024肥宅35 分钟前
JavaScript常用设计模式完整指南
前端·javascript·设计模式
董世昌4142 分钟前
js怎样控制浏览器前进、后退、页面跳转?
开发语言·前端·javascript
走,带你去玩43 分钟前
uniapp live-pusher + 腾讯云直播
前端·javascript·uni-app
徐同保1 小时前
electron打包项目
前端·javascript·electron
Maybyy1 小时前
如何在项目里面添加一个可以左右翻动并显示指定日期的日历
前端·vue.js
柯南二号1 小时前
【大前端】【Android】用 Python 脚本模拟点击 Android APP —— 全面技术指南
android·前端·python
Arvin_Rong1 小时前
前端动态 API 生成与封装:前端 API 调用的一种思路
前端