移动端适配AED成本对比表格时，:before多行标题溢出单元格问题

Hey Brandon, 我之前做医疗设备对比表格的移动端适配时，也碰到过一模一样的多行标题重叠问题！给你几个亲测有效的解决思路：

1. 给伪元素标题足够的“生存空间” #

默认情况下，:before伪元素是行内元素，多行文本会直接挤在一起甚至溢出。你可以通过CSS让它独占一行，同时处理换行：

@media (max-width: 768px) {
  td:before {
    display: block; /* 让标题单独占一行 */
    white-space: pre-wrap; /* 自动处理多行文本换行 */
    margin-bottom: 8px; /* 和下方内容拉开距离，避免重叠 */
    font-weight: 600; /* 突出标题，区分内容 */
  }
}

2. 把单元格改成“卡片式”布局 #

让每个单元格像独立的卡片，增加内边距和间距，从根源上避免内容拥挤：

@media (max-width: 768px) {
  td {
    display: block;
    padding: 16px 12px; /* 加大内边距，给标题和内容留足空间 */
    margin-bottom: 12px; /* 单元格之间增加分隔间距 */
    border-bottom: 1px solid #eee; /* 用边框区分不同单元格 */
  }
}

3. 优化动态标题的换行逻辑 #

如果你的标题是通过data-label属性动态插入的（大部分适配方案都会这么做），可以针对长标题做强制换行处理：

td:before {
  content: attr(data-label);
  word-break: break-word; /* 强制长单词或长文本换行 */
  white-space: pre-line; /* 识别文本中的换行符，自动换行 */
}

完整适配示例（带多行标题处理） #

这里给你一个我用过的完整代码片段，专门处理长标题场景：

<table class="aed-comparison">
  <thead>
    <tr>
      <th>AED型号</th>
      <th>购买成本</th>
      <th>年度维护费用</th>
      <th>适用场景</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="AED型号">HeartStart FRx</td>
      <td data-label="购买成本">$1,499</td>
      <td data-label="年度维护费用（含电池、校准、上门服务）">$180</td>
      <td data-label="适用场景">学校、体育馆、大型商超等人员密集场所</td>
    </tr>
  </tbody>
</table>

.aed-comparison {
  width: 100%;
  border-collapse: collapse;
}

@media (max-width: 768px) {
  /* 隐藏原生表头，用伪元素替代 */
  .aed-comparison thead {
    display: none;
  }
  
  .aed-comparison tr {
    display: block;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  .aed-comparison td {
    display: block;
    text-align: right;
    padding: 14px 12px;
    position: relative;
  }
  
  .aed-comparison td:before {
    content: attr(data-label);
    position: absolute;
    left: 12px;
    top: 14px;
    font-weight: bold;
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 45%; /* 限制标题宽度，避免和右侧内容重叠 */
    text-align: left;
  }
}

这个方案把标题固定在左侧，内容放在右侧，即使标题是2-3行，也不会和内容重叠，同时整体布局更清晰。

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