Telerik RadGrid移动端：Android替代text-indent悬挂缩进方案

针对Android浏览器不支持text-indent: hanging 45%的问题，推荐使用Flexbox布局替代，既能实现标签与内容的固定比例排版，又能保证长文本换行时自动左对齐，同时兼容所有主流移动设备（包括Android 4.4+及iOS全版本）。

核心实现思路 #

不再依赖display: inline-block和悬挂缩进，而是将每个<td>转为Flex容器，通过固定宽度的伪元素（列标题）和自适应宽度的内容区实现排版：

• 伪元素（data-label内容）固定占比45%，且不随容器收缩
• 内容区占剩余空间，换行时自动对齐到容器左侧

具体CSS代码 #

/* 移动端媒体查询，可根据实际断点调整 */
@media (max-width: 767px) {
    /* 重置RadGrid移动端单元格样式 */
    .RadGrid td {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 8px; /* 可选：增加单元格间距提升可读性 */
    }

    /* 处理列标题伪元素 */
    .RadGrid td:before {
        content: attr(data-label);
        flex-shrink: 0; /* 禁止伪元素收缩，保证固定宽度 */
        width: 45%; /* 和原text-indent比例保持一致 */
        font-weight: bold; /* 可选：标题加粗区分内容 */
        margin-right: 10px; /* 可选：增加标题与内容的间距 */
    }

    /* 处理文档名称的下载链接 */
    .RadGrid td .document-link {
        flex: 1; /* 让链接占满剩余空间，换行自动对齐 */
        word-break: break-word; /* 长链接自动换行避免溢出 */
    }
}

关键细节说明 #

1. Flex容器设置：display: flex + flex-wrap: wrap保证标签和内容在空间不足时自动换行，内容部分会从新行左侧开始排列，彻底解决对齐问题。
2. 伪元素固定宽度：flex-shrink: 0确保列标题不会被压缩，始终占据设定的45%宽度，和原text-indent视觉效果一致。
3. 链接处理：给下载链接添加flex:1让它自适应剩余空间，word-break: break-word避免长链接撑破容器。

这种方案无需依赖浏览器对hanging文本缩进的特殊支持，是更通用的移动端表格适配方案，同时完全兼容你当前通过data-label显示列标题的逻辑。

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