如何阻止display:table-cell元素内的文本自动换行

方案1：基于现有table布局修改 #

你只需要给左侧第一列的单元格添加white-space: nowrap属性即可禁止文本自动折行，该属性会让文本始终在一行内显示，不会自动换行。修改后的CSS如下：

.table{
    display: table;
    > .table-row{
        display: table-row;
        > .table-col{
            display: table-cell;
            vertical-align: top;
            /* 只给左侧第一列添加不换行规则，右侧保留正常换行 */
            &:first-child {
                white-space: nowrap;
            }
            p{
                margin-right: 1rem;
            }
        }
    }
}

如果需要所有单元格都禁止换行，直接把white-space: nowrap写在.table-col下即可。

方案2：使用Grid布局实现（更灵活易维护） #

如果你不想使用模拟table的布局，Grid布局实现这类两列式表单效果会更简单，修改后的CSS如下：

.table{
    display: grid;
    /* 第一列宽度自适应内容，第二列占剩余所有宽度 */
    grid-template-columns: auto 1fr;
    /* 可选：设置行列间距 */
    row-gap: 8px;
    column-gap: 1rem;
    > .table-row {
        display: contents;
    }
    > .table-col{
        vertical-align: top;
        /* 左侧标签列自动不换行 */
        &:nth-child(odd) {
            white-space: nowrap;
        }
    }
}

使用该方案你也可以删掉HTML中所有的.table-row包裹层，直接把所有.table-col平级放在.table容器内，代码结构会更简洁。

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