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; 
}
相关推荐
yanyu-yaya18 分钟前
速学兼复习之vue3章节3
前端·javascript·vue.js·学习·前端框架
web小白成长日记21 分钟前
前端向架构突围系列模块化 [4 - 1]:思想-超越文件拆分的边界思维
前端·架构
tkevinjd23 分钟前
3-Vue&Ajax
前端·vue.js·ajax
林恒smileZAZ26 分钟前
前端拖拽,看似简单,其实处处是坑
前端·javascript·vue.js
Filotimo_36 分钟前
那在HTML中,action是什么
前端·okhttp·html
跟着珅聪学java42 分钟前
JavaScript中编写new Vue()实例的完整教程(Vue 2.x)
前端·javascript·vue.js
Pu_Nine_91 小时前
Vue Router 企业级配置全攻略:打造专业级路由系统
前端·vue.js·typescript·vue-router·路由配置
Marshmallowc1 小时前
React 合成事件失效?深度解析 stopPropagation 阻止冒泡无效的原因与 React 17+ 事件委派机制
前端·javascript·react.js·面试·合成事件
遗憾随她而去.1 小时前
前端浏览器缓存深度解析:从原理到实战
前端
万行2 小时前
企业级前后端认证方式
前端·windows