解决html表格中内容超出不强制换⾏
解决html表格中内容超出不强制换⾏和超出宽度⾃动隐藏并显⽰省略号在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,
这个时候我们可能会有为了布局稳定把单元格宽度写死的情况;但是我们设置了宽度却发现超出了宽度之后会⾃动变⼤,⽤css定义元素的overflow:hidden;属性也不⾏;
最后找的的解决⽅案如下:
table {
table-layout:fixed; /* 只有定义了表格的布局算法为fixed,下⾯td的定义才能起作⽤。*/
}
td {
width:100%;
word-break:keep-all; / * 不换⾏ */
white-space:nowrap; / * 不换⾏ */
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis; /* 当对象内⽂本溢出时显⽰省略标记(...) ;需与overflow:hidden;⼀起使⽤。*/
}
如果担⼼隐藏了看不到完整的单元格内容建.
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)