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; 
}
相关推荐
We་ct15 小时前
LeetCode 72. 编辑距离:动态规划经典题解
前端·算法·leetcode·typescript·动态规划
小呆呆66616 小时前
Codex 穷鬼大救星
前端·人工智能·后端
当时只道寻常16 小时前
Vue3 + IntersectionObserver 实现高性能图片懒加载
前端
sakiko_17 小时前
UIKit学习笔记3-布局、滚动视图、隐藏或显示视图
前端·笔记·学习·objective-c·swift·uikit
有一个好名字17 小时前
Agent Loop —— 一切从那个 while 循环开始
前端·javascript·chrome
一天睡25小时17 小时前
Claude Code 指令入门教程
前端
yingyima18 小时前
正则表达式实战:从日志中精准提取关键字段
前端
TeamDev18 小时前
如何在 DotNetBrowser 中使用本地 AI 模型
前端·后端·.net
谢尔登18 小时前
10_从 React Hooks 本质看 useState
前端·ubuntu·react.js
辰同学ovo18 小时前
从全局登录状态管理学习 Redux
前端·javascript·学习·react.js