table-layout: fixed 必须与 width: 100% 和显式列宽(如或首行/的width)三者同时生效才有效;仅设fixed无效,且word-wrap/break-word等换行控制必须作用于td/th而非table。

table-layout: fixed 必须和 width + 列宽同时生效
只给 table 加 table-layout: fixed 没用。它必须搭配 width: 100% 和至少一个显式列宽(比如 <col width="25%"> 或 <th style="width: 200px">),三者缺一不可。否则浏览器仍按 <code>auto 布局计算列宽,长 URL 一出现,整列就撑开,溢出问题照旧。
word-wrap: break-word 要作用在 td/th 上,不是 table
word-wrap: break-word(现代写法是 overflow-wrap: break-word)必须直接设在 td 或 th 元素上。写在 table 上无效——因为换行行为发生在单元格内容层,不是表格容器层。
- 确保
td同时有white-space: normal(默认值,但显式声明更稳妥) - 避免和
word-break: break-all同时使用,后者会覆盖前者,且可能把https://拆成https:/ / - 若
td里嵌了<div> 或 <code><span></span>,它们默认可能继承white-space: nowrap,得单独重置超长URL要主动加零宽空格或
overflow-wrap: break-word对斜杠(/)后断点支持弱,常在域名中间硬切。更可靠的方式是在服务端或 JS 中,在/、?、&后插入零宽空格()或<wbr></wbr>标签:https://example.com/verylongpath<wbr>/to<wbr>/resource</wbr></wbr>
<wbr></wbr>是语义化断点,不影响链接可点击性,也不改变 URL 逻辑,移动端 Safari 和 Chrome 都支持良好。iOS 15 以下对渲染略有间距,优先用<wbr></wbr>。
Teleport tsh SSH (Identity-First SSH Access, no passwords/static keys)下载使用tbot机器ID身份文件配合tsh CLI,通过Teleport访问控制SSH登录托管主机或执行远程命令。
图片和 pre/code 必须单独处理
td里如果混了<img>或<pre class="brush:php;toolbar:false;"></pre>,它们会绕过table-layout: fixed的列宽控制:-
img必须加max-width: 100%; height: auto; -
pre和code默认white-space: pre,得额外设white-space: pre-wrap或overflow-x: auto - 不要指望
overflow: hidden在td上对这些元素生效——溢出源不在td本身,而在子元素内部
真正卡住的点往往不是要不要换行,而是谁来负责换行:浏览器默认不打断连续字符流,而表格又默认等所有内容算完才定列宽。这两个机制叠加,让单纯加样式变成“隔山打牛”。
-










