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; 
}
相关推荐
C# 学习者几秒前
C# 为异步函数实现WaitAsync方法
java·前端·c#
逆风优雅11 分钟前
vue 实现自定义message 全局提示
前端·javascript·vue.js
艾小码14 分钟前
前端开发者必看!JavaScript这些坑我替你踩过了
前端·javascript
浮游本尊14 分钟前
React 18.x 学习计划 - 第六天:React路由和导航
前端·学习·react.js
fruge3 小时前
Vue项目中的Electron桌面应用开发实践指南
前端·vue.js·electron
漂流瓶jz9 小时前
Webpack中各种devtool配置的含义与SourceMap生成逻辑
前端·javascript·webpack
前端架构师-老李9 小时前
React 中 useCallback 的基本使用和原理解析
前端·react.js·前端框架
musenh9 小时前
css样式学习
css·学习·css3
木易 士心10 小时前
CSS 中 `data-status` 的使用详解
前端·css
明月与玄武10 小时前
前端缓存战争:回车与刷新按钮的终极对决!
前端·缓存·回车 vs 点击刷新