如何实现td内同尺寸contenteditable div的文本水平垂直居中

之前踩坑的核心原因 #

• 直接给contenteditable div加display: flex时，div内部的文本节点、<span>等标签会被识别为独立的flex项，破坏原本的行内文本流，导致异常断行。
• 给div加display: table-cell时，td本身已经是table-cell属性，嵌套的table-cell元素不会自动撑满父级空间，因此无法填满td。
• 嵌套父div加flex的方案，本质没有解决行内文本流被破坏的问题，且高度适配容易出错。

正确实现代码 #

HTML结构（无需额外嵌套） #

<td>
    <div class="cellText" contenteditable="true"></div>
</td>

适配后的CSS #

td {
    border: 1px solid #d9d9d9;
    height: 16pt; /* 作为单元格最小高度，内容多了会自动撑高 */
    padding: 0;
    min-width: 100px;
    box-sizing: border-box;
}

.cellText {
    /* 完全占满td空间 */
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /* 水平居中 */
    text-align: center;
    /* 长文本自动换行 */
    overflow-wrap: break-word;
    word-break: break-word;
    /* 移除contenteditable默认聚焦边框 */
    outline: none;
}

/* 核心垂直居中实现，不破坏行内文本流 */
.cellText::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

/* 所有行内内容统一对齐 */
.cellText, .cellText * {
    vertical-align: middle;
}

方案优势 #

• 完全保留div内部的行内文本流，<span>标签、普通文本的排版和换行完全和原生一致，不会出现flex方案的异常断行问题。
• div自动撑满td的全部宽高，不管是单元格最小高度还是内容撑高后的高度都能适配。
• 单行、多行文本都能自动实现水平、垂直双向居中。

内容的提问来源于stack exchange，提问作者badbeat1