html - 如何仅在换行符上添加边距？

Question

当一个字符串被分成多行时，我试图添加一个 margin-bottom。

我阅读了有关 box-decoration-break 的内容，但这似乎并没有实现我想要实现的目标。

下面的代码片段显示了我正在尝试做的事情(只有最后一行应该有一个 margin-bottom)。

div {
  max-width: 250px;
}

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

td div {
  margin-bottom: 25px;
}

<div>
  <table>
    <tr>
       <td>One</td>
       <td>1</td>
       <td>
          <div>This is a short string</div>
       </td>
    </tr>
    <tr>
       <td>Two</td>
       <td>2</td>
       <td>
          <div>This is a short string</div>
       </td>
    </tr>
    <tr>
       <td>Three</td>
       <td>3</td>
       <td>
          <div>This string is way too long so it will be broken</div>
       </td>
    </tr>
  </table>
<div>

Answer 1

我搜索答案的每个地方都说这是不可能的，所以我们需要一个严肃的巫术和一些你必须同意的限制。

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}
td span {
  display: inline-block;
}

div {
  width: 250px;
}
td span:after {
  content: "";
  margin-top: calc((100% - 250px + 1px / 10) * 16 * 10);
  display: block;
}

<div>
  <table>
    <tr>
       <td>One</td>
       <td>1</td>
       <td>
         <div><span>This is a short string</span></div>
       </td>
    </tr>
    <tr>
       <td>Two</td>
       <td>2</td>
       <td>
         <div><span>This is a short string</span></div>
       </td>
    </tr>
    <tr>
       <td>Three</td>
       <td>3</td>
       <td>
         <div><span>This string is way too long so it will be broken</span></div>
       </td>
    </tr>
  </table>
<div>

我想到的最好的想法是根据高度添加边距，因为两行或更多行会使它更高。不幸的是，高度、边距、填充、边框以及可能其他所有内容的百分比都基于父项的……宽度。

因此，让我们利用已有的资源。环绕文本意味着宽度达到最大值 - 比方说 250px。一行表示宽度必须小于250px。因此，让我们从我们拥有的任何宽度中减去最大 250px。如果达到最大宽度，我们将以负数或 0 结束。现在让我们添加 1px 并将其乘以当前 font-size (16px)。现在请记住，对于文本最终具有 249.5px 的极端情况，我们将有一半的边距低于 :(。为了缓解这种情况，我们可以减少 1px n 次，并将它乘以我们的 n 次 font-size。值越小，它越安全。

限制:

• 容器的宽度必须已知(固定)，因为您必须从 100% 中减去 if。
• 边距的字体大小或高度也必须以“像素”为单位。不能使用基于微小位单位的值相乘(1em 不起作用)。
• 我们需要用额外的标签包裹文本，这样父元素的宽度就基于文本(inline 或类似的)。如果确保此列的宽度保持不变，则可以去掉 div。

希望对您有所帮助;)