如何在换行时只添加边距？

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>

- Brammz

---

你能分享一下你期望的屏幕截图吗？ - vadivel a

这是一个屏幕截图：https://imgur.com/a/avdnJGe - Brammz

你可以为上述两行代码添加td或tr的class。 - vadivel a

这个边距的目的是什么？ - Paulie_D

如果没有分离的块级元素（至少是内联块级元素），你无法仅使用CSS实现这一点。不过，Canvas确实支持.measureText，看起来你需要做一些工作。另一个选择是创建网格设计，其中一个空格代表一个字母。然后你就会知道文本何时到达行末了。 - StackSlave

td div { 行高：40像素；下边距：25像素； }，但它也会添加到顶部。 - StackSlave

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>

我想到的最好的办法是根据高度添加边距，因为两行或更多行会使高度增加。不幸的是，高度、边距、填充、边框和可能的其他所有百分比都基于父元素的宽度。

所以让我们用我们拥有的东西来工作。换行文本意味着宽度达到其最大值 - 假设为250像素。一行意味着宽度必须小于250像素。因此，让我们从任何宽度中减去最大的250像素。我们要么得到负数，要么在达到最大宽度时得到0。现在让我们添加1像素并将其乘以当前字体大小（16px）。现在请记住，对于极端情况，文本最终会有249.5像素，我们将在下面半个边距:(。为了缓解这种情况，我们可以将1像素减少n次，并将其与我们的字体大小n次相乘。值越小，越安全。

限制：

- 容器的宽度必须已知（固定），因为您必须将其从100%中减去。 - 字体大小或边距的高度也必须为“像素”。不能使用基于我们微小单位的值进行乘法（1em不起作用）。 - 我们需要用额外的标记包装文本，以便父元素的宽度基于文本（内联或类似）。如果确保此列的宽度保持不变，则可以摆脱div。

希望能有所帮助;)

- Buszmen