html - 表格中的文本换行，填充剩余宽度中间列

Question

我试图让一条水平线在表格的第一列和最后一列之间延伸，但如果文本很长，我需要第一列和最后一列换行。我发现获得预期效果的唯一方法是在中间列上使用 width:100%;，在第一列和最后一列上使用 white-space:nowrap; ，但我需要找到另一种方法，因为我需要在没有足够空间时换行文本。有没有办法在纯 CSS 中实现这种效果？

https://jsfiddle.net/macu/8axk5qv5/4/

table {
  width: 100%;
}

td {
  vertical-align: middle;
  white-space: nowrap;
}

td:nth-child(2) {
  width: 100%;
}

.line {
  border-top: thin solid blue;
}

<table>
  <tr>
    <td>Title cell with a long title that should wrap</td>
    <td><div class="line"></div></td>
    <td>Another cell, should wrap</td>
  </tr>
</table>

如果文本足够长，则不应有一行，并且文本应正常换行:

Answer 1

您可以在每个单元格中放置一个 span 或 div，并使它们使用白色背景，然后在表格行上设置线条以直观地创建这样的布局。

查看下面的 fiddle 演示，这样您就可以轻松调整大小并查看环绕文字。

jsFiddle

.table {
  width: 100%;
  border-collapse: collapse;
}

.table tr {
  background: linear-gradient(blue, blue) center/99.99% 1px no-repeat;
}

.table div {
  background: white;
  display: inline-block;
}

.middle div {
  min-width: 100px; /*remove or adjust value as need*/
}

.last {
  text-align: right;
}

<table class="table">
  <tr>
    <td class="first">
      <div>Title cell with a long title that should wrap</div>
    </td>
    <td class="middle">
      <div><!-- This td can be removed if no min-width needed --></div>
    </td>
    <td class="last">
      <div>Another cell, should wrap</div>
    </td>
  </tr>
</table>

但是如果您不必使用表格，使用 flexbox 可以使它变得容易得多。

jsFiddle

.container {
  display: flex;
}

.line {
  background: linear-gradient(blue, blue) center/1px 1px repeat-x;
  flex: 1;
  min-width: 100px; /*remove or adjust value as need*/
}

<div class="container">
  <div>Title cell with a long title that should wrap</div>
  <div class="line"></div>
  <div>Another cell, should wrap</div>
</div>