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; 
}
相关推荐
没落英雄24 分钟前
6. 从零搭建一个 AI Agent —— 构建 Web 前端,让用户能和 agent 实时交互
前端·人工智能·架构
爱勇宝34 分钟前
《道德经》第4章,老子写得很像在描述一个“底层系统”。
前端·后端·程序员
snow@li1 小时前
Java:Java 服务器(Web 容器 / Servlet 容器)完整工作清单
java·服务器·前端
洋子2 小时前
Yank Note 系列 14 - 我和 AI 怎么一起写文章
前端·markdown
江华森3 小时前
前端构建工具 Webpack 速览
前端·webpack·node.js
谙忆10243 小时前
HTTP 图片缓存实战:Cache-Control、ETag、内容哈希文件名与 CDN 回源到底怎么配
前端
小妖6663 小时前
React input 输入卡顿问题
前端·javascript·react.js
এ慕ོ冬℘゜3 小时前
JavaScript 数据类型检测与转换、运算符超全实战详解
前端·html
kyriewen3 小时前
我用 AI 写代码快了 3 倍——然后同事的 Code Review 全变成了我的
前端·程序员·ai编程