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; 
}
相关推荐
我笔记1 小时前
vue 子父调用
前端·javascript·vue.js
毕设源码-朱学姐2 小时前
【开题答辩全过程】以 基于vue.js的校园二手平台为例,包含答辩的问题和答案
前端·javascript·vue.js
m0_471199632 小时前
【JavaScript】Set 和 Map 核心区别与实战用法(ES6 集合全解析)
前端·javascript·es6
hoiii1872 小时前
MATLAB中主成分分析(PCA)与相关性分析的实现
前端·人工智能·matlab
大波V53 小时前
用 nvm 彻底重装 Node 12.22.12(确保干净)
前端
和和和3 小时前
React Scheduler为何采用MessageChannel调度?
前端·javascript
Ric9703 小时前
Mac上Git不识别文件名大小写修改?一招搞定!
前端
和和和3 小时前
前端应该知道的浏览器知识
前端·javascript
狗哥哥3 小时前
前端基础数据中心:从混乱到统一的架构演进
前端·vue.js·架构
树深遇鹿3 小时前
数据字典技术方案实战
前端·javascript·架构