表格单元格，自动换行的文本，适合内容的宽度，删除多余的右侧空白

问题描述

我有一个固定宽度的表格容器，它将包含3个由单个字符（>）分隔的文本元素。 这些文本元素可能包含无法与其余一行一起容纳在容器中的文本，必须将其包装。

问题是，当文本换行时，单元格将在右侧包含额外的空白，然后强制其他元素换行，通常情况下，如果没有空白，则后续元素将分别放在一行中

这是所需的行为：

第一个文本元素不能放在一行上并且必须换行。

但是其他任何文本元素也可能无法放在一行中，并且必须换行，而不会留有多余的空白。

使用基本的表格布局：

<table class="table">
  <tbody>
    <tr>
      <td>Membership Clubs and Organizations</td>
      <td>></td>
      <td>Books Wholesaler</td>
      <td>></td>
      <td>Music Management</td>
    </tr>
  </tbody>
</table>

.table {
  width:450px;
  border:1px solid black;
}

这里有多余的空格，导致后续元素也换行。

经过大量研究，我得出的最接近的结果是为文本元素设置width：0.1％。 不幸的是，这导致分隔的字符具有自己的额外空白，我无法删除该空白，也无法减小其宽度以适合其内容。

<table class="table">
  <tbody>
    <tr>
      <td class="text">Membership Clubs and Organizations</td>
      <td class="separator">></td>
      <td class="text">Books Wholesaler</td>
      <td class="separator">></td>
      <td class="text">Music Management</td>
    </tr>
  </tbody>
</table>

.text {
  width:0.1%;
}
.table {
  width:450px;
  border:1px solid black;
}

我决定使用表，因为它使我更接近需要的东西，但是我可以使用任何格式，唯一的要求是它使用纯CSS，而不使用任何JavaScript。

.text {
  width:0.1%;
}
.table {
  width:450px;
  border:1px solid black;
}

<table class="table">
  <tbody>
    <tr>
      <td class="text">Membership Clubs and Organizations</td>
      <td class="separator">></td>
      <td class="text">Books Wholesaler</td>
      <td class="separator">></td>
      <td class="text">Music Management</td>
    </tr>
  </tbody>
</table>

解决方法

无论什么情况，表格的宽度都迫使空格留在那里。表格单元格有额外的空间，因此单词在必要时会自动换行，或者单元格没有额外的空间，因此单词会在每个单词上自动换行。

我认为零空格的唯一选择是

td { word-break: break-all; }

.table {
  width:450px;
  border:1px solid black;
}
td {
  word-break: break-all;
}

<table class="table">
  <tbody>
    <tr>
      <td class="text">Membership Clubs and Organizations</td>
      <td class="separator">></td>
      <td class="text">Books Wholesaler</td>
      <td class="separator">></td>
      <td class="text">Music Management</td>
    </tr>
  </tbody>
</table>

,

只需删除

.text {
  width:0.1%;
}