table单元格文字挤成一团是因为writing-mode: vertical-rl在display: table-cell上生效受限，必须显式设height、vertical-align: middle、line-height无单位值，并配text-orientation: mixed防英文堆叠。

table单元格里用writing-mode: vertical-rl为什么文字挤成一团？

因为writing-mode在上生效，但默认td是display: table-cell，而该显示类型对writing-mode的支持受父table布局约束——尤其当没设height或vertical-align时，行高塌陷，文字被压缩到单行高度内。

实操建议：

• 给显式设置height（比如height: 120px），这是竖排能“展开”的前提
• 加vertical-align: middle让文字在单元格内垂直居中，避免贴顶或贴底
• 禁用line-height: normal或line-height: 1，改用无单位值如line-height: 1.4，否则竖排下字间距会失真
• 如果内容含英文/数字，必须配text-orientation: mixed，否则ABC123会横着堆在一行里

table header怎么让文字竖排又保持可点击区域完整？

直接对设writing-mode: vertical-rl后，点击热区常变窄——因为竖排后width变成“列宽”，而默认th的width由内容撑开，导致热区只剩一个字宽。

实操建议：

• 给加min-width: 2em（或具体像素值），确保点击区域足够
• 用padding代替width控制左右留白，比如padding: 8px 12px
• 避免对th设white-space: nowrap，它会让竖排文本横向溢出，反而切掉热区
• 若需响应式，用min-width: max-content配合width: fit-content，比固定像素更稳妥

IE11兼容table竖排要怎么降级？

@supports (writing-mode: vertical-rl)在IE11里不生效，且IE11只认-ms-writing-mode: tb-rl，还不支持text-orientation。硬套现代写法会导致整个单元格空白或错位。


财经HTML高端海报生成
复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
下载

实操建议：

• 用@supports not (writing-mode: vertical-rl)包裹降级样式，专供IE识别
• 降级方案不用transform旋转——它会让th宽度计算错乱、表头和数据列错位
• 改用display: block + width: 1em + line-height: 1.8模拟单字一行，再用text-align: center居中
• 对IE11额外加word-break: break-all，防止长英文单词撑破单元格

table里竖排文字换行异常，是white-space没调对

竖排表格里，内容突然断在奇怪位置（比如“中华人民”断成“中华”“人民”两列），不是内容问题，而是white-space默认值normal在竖排下把中文标点（顿号、逗号）当成了换行点。

实操建议：

• 优先用white-space: pre-line：保留手动换行符\n，合并多余空格，适合标题类短文本
• 长段落才用white-space: normal，但得配合text-align: justify和letter-spacing: .05em改善断行节奏
• 绝对别用white-space: nowrap——竖排下它会让整列文字横向溢出，表格结构直接崩
• 如果单元格里混有URL或代码片段，加overflow-wrap: anywhere防溢出

关键点藏在容器层级里：table本身不响应writing-mode，真正起作用的是td或th的块上下文是否干净——float、inline-block、未设高度，任何一个都会让竖排失效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！