如何在表格单元格文本换行时才添加底部内边距？

我用无边框<table><tr><td>布局表格，当单元格文本较短不换行时，能通过垂直位置轻松区分行；但文本过长换行（尤其是多次换行）时，很难区分单元格内的换行文本和下一行的内容。

我不想通过添加边框或固定单元格内边距解决——这个组件要适配其他场景，必须保持紧凑。我希望仅在<td>内文本换行时，为其添加底部内边距（padding-bottom），实现行与行的视觉分隔。

当前CSS代码：

td.value {
  padding-right: 1em;
  max-width: 100em;
  word-wrap: break-word;
}

直接加padding-bottom: 2em会在文本不换行时产生多余空间，而用JavaScript动态设置类的话，又没法判断文本是否换行（而且表格列数、列宽都是可变的）。

示例代码：

CSS #

.wrapper {
  width: 75em;
}

td.name {
  font-family: monospace;
  font-weight: bold;
  position: sticky;
  left: 0;
  background-color: white;
  padding-right: 1em;
}

td.value {
  padding-right: 1em;
  max-width: 100em;
  word-wrap: break-word;
}

.small {
  font-size: 0.7em;
}

.red {
  color: red;
}

HTML #

<div class="wrapper">
  <table>
    <tr>
      <td class="name svelte-148wmfe">
      ALIAS1</td>
       <td class="value svelte-148wmfe small">
      (DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=bogushost.bogusdomain)(PORT=1530))(CONNECT_DATA=(SERVER=DEDICATED)(SERVICE_NAME=SERVICE1)))</td>
      <td class="value svelte-148wmfe small">
      (DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=bogushost.bogusdomain)(PORT=1530))(CONNECT_DATA=(SERVER=DEDICATED)(SERVICE_NAME=SERVICE1)))</td>
      <td class="value svelte-148wmfe small">
      (DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=bogushost.bogusdomain)(PORT=1530))(CONNECT_DATA=(SERVER=DEDICATED)(SERVICE_NAME=SERVICE1)))</td>
      <td class="value svelte-148wmfe small">
      (DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=bogushost.bogusdomain)(PORT=1530))(CONNECT_DATA=(SERVER=DEDICATED)(SERVICE_NAME=SERVICE1)))</td>
      <td class="value svelte-148wmfe small">
      (DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=bogushost.bogusdomain)(PORT=1530))(CONNECT_DATA=(SERVER=DEDICATED)(SERVICE_NAME=SERVICE1)))</td>
      <td class="value svelte-148wmfe small">
      (DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=bogushost.bogusdomain)(PORT=1530))(CONNECT_DATA=(SERVER=DEDICATED)(SERVICE_NAME=SERVICE1)))</td>
      <td class="value svelte-148wmfe small">
      (DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=bogushost.bogusdomain)(PORT=1530))(CONNECT_DATA=(SERVER=DEDICATED)(SERVICE_NAME=SERVICE1)))</td>
     </tr>
    <tr>
      <td class="name svelte-148wmfe">
      ALIAS2</td>
       <td class="value svelte-148wmfe small">
      (DESCRIPTION=(ADDRESS_LIST=(ADDRESS=(PROTOCOL=TCP)(HOST=bogushost2.bogusdomain2)(PORT=1544)))(CONNECT_DATA=(SERVICE_NAME=SERVICE2)))</td>
      <td class="value svelte-148wmfe small">
      (DESCRIPTION=(ADDRESS_LIST=(ADDRESS=(PROTOCOL=TCP)(HOST=bogushost2.bogusdomain2)(PORT=1544)))(CONNECT_DATA=(SERVICE_NAME=SERVICE2)))</td>
      <td class="value svelte-148wmfe small">
      (DESCRIPTION=(ADDRESS_LIST=(ADDRESS=(PROTOCOL=TCP)(HOST=bogushost2.bogusdomain2)(PORT=1544)))(CONNECT_DATA=(SERVICE_NAME=SERVICE2)))</td>
      <td class="value svelte-148wmfe small">
      (DESCRIPTION=(ADDRESS_LIST=(ADDRESS=(PROTOCOL=TCP)(HOST=bogushost2.bogusdomain2)(PORT=1544)))(CONNECT_DATA=(SERVICE_NAME=SERVICE2)))</td>
      <td class="value svelte-148wmfe small">
      (DESCRIPTION=(ADDRESS_LIST=(ADDRESS=(PROTOCOL=TCP)(HOST=bogushost2.bogusdomain2)(PORT=1544)))(CONNECT_DATA=(SERVICE_NAME=SERVICE2)))</td>
      <td class="value svelte-148wmfe small">
      (DESCRIPTION=(ADDRESS_LIST=(ADDRESS=(PROTOCOL=TCP)(HOST=bogushost2.bogusdomain2)(PORT=1544)))(CONNECT_DATA=(SERVICE_NAME=SERVICE2)))</td>
      <td class="value svelte-148wmfe small">
      (DESCRIPTION=(ADDRESS_LIST=(ADDRESS=(PROTOCOL=TCP)(HOST=bogushost2.bogusdomain2)(PORT=1544)))(CONNECT_DATA=(SERVICE_NAME=SERVICE2)))</td>
     </tr>
    <tr>
      <td class="name svelte-148wmfe">
      ALIAS3</td>
       <td class="value svelte-148wmfe small">
      (DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=bogushost3.bogusdomain3)(PORT=1521))(CONNECT_DATA=(SID=SERVICE3)))</td>
      <td class="value svelte-148wmfe small">
      (DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=bogushost3.bogusdomain3)(PORT=1521))(CONNECT_DATA=(SID=SERVICE3)))</td>
      <td class="value svelte-148wmfe small">
      (DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=bogushost3.bogusdomain3)(PORT=1521))(CONNECT_DATA=(SID=SERVICE3)))</td>
      <td class="value svelte-148wmfe small">
      (DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=bogushost3.bogusdomain3)(PORT=1521))(CONNECT_DATA=(SID=SERVICE3)))</td>
      <td class="value svelte-148wmfe small">
      (DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=bogushost3.bogusdomain3)(PORT=1521))(CONNECT_DATA=(SID=SERVICE3)))</td>
      <td class="value svelte-148wmfe small">
      (DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=bogushost3.bogusdomain3)(PORT=1521))(CONNECT_DATA=(SID=SERVICE3)))</td>
      <td class="value svelte-148wmfe small">
      (DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=bogushost3.bogusdomain3)(PORT=1521))(CONNECT_DATA=(SID=SERVICE3)))</td>
     </tr>
  </table>
</div>

方案1：纯CSS实现（需修改HTML结构） #

这个方法不需要JavaScript，利用overflow:hidden和margin-bottom的特性，仅在文本换行时显示底部间距。

步骤1：修改HTML #

把每个td.value内的文本包裹在一个<div>中：

<td class="value svelte-148wmfe small">
  <div>(DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=bogushost.bogusdomain)(PORT=1530))(CONNECT_DATA=(SERVER=DEDICATED)(SERVICE_NAME=SERVICE1)))</div>
</td>

步骤2：更新CSS #

td.value {
  padding-right: 1em;
  max-width: 100em;
  word-wrap: break-word;
  /* 关键设置：固定单行文本的行高，隐藏超出部分 */
  line-height: 1.2; /* 根据你的字体大小调整，匹配单行文本高度 */
  overflow: hidden;
}

td.value > div {
  /* 换行时要添加的底部间距，单行时会被td的overflow:hidden截断 */
  margin-bottom: 2em;
}

原理：

• 当文本为单行时，<div>的高度等于line-height，margin-bottom:2em会超出<td>的范围，被overflow:hidden隐藏，不会产生多余空间；
• 当文本换行时，<div>的高度被撑开超过line-height，<td>会自动适应高度，margin-bottom就会显示出来，形成底部间距。

方案2：JavaScript动态判断（无需修改HTML） #

如果无法修改HTML结构，用JavaScript判断单元格是否换行，动态添加类来设置底部内边距。

步骤1：添加CSS类 #

td.value.wrapped {
  padding-bottom: 2em;
}

步骤2：编写JavaScript #

// 检查所有td.value是否换行，添加/移除wrapped类
function checkTdWrap() {
  document.querySelectorAll('td.value').forEach(td => {
    // scrollHeight > clientHeight 说明内容超出单行，发生换行
    if (td.scrollHeight > td.clientHeight) {
      td.classList.add('wrapped');
    } else {
      td.classList.remove('wrapped');
    }
  });
}

// 页面加载时初始化
window.addEventListener('load', checkTdWrap);
// 窗口大小变化时重新检查（列宽变化会影响换行）
window.addEventListener('resize', checkTdWrap);

原理：

• scrollHeight是元素内容的总高度（包括超出可视区域的部分），clientHeight是元素的可视高度；
• 当文本换行时，scrollHeight会大于clientHeight，此时给单元格添加wrapped类，应用底部内边距；
• 监听窗口resize事件，确保列宽变化时重新判断换行状态。

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