5. 【原创】table设置text-overflow: ellipsis;(超出范围显示...)不生效
最近写的页面中,想让table中的td内容超出文本之后显示'...',但是使用text-overflow: elipsis;没有生效,后来经过试验才摸索出正确的设置方式。
table { table-layout: fixed;//表格布局:固定 width: 200px; //一点呀设置表格的宽度 } td { white-space: nowrap;//超出文本不换行 overflow: hidden;//超出文本隐藏 text-overflow: ellipsis; //超出文本显示... }
还可以使用hover属性设置鼠标悬停的时候显示其内容。
td:hover { text-overflow:inherit; overflow:visible; }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步