Html 表格单元格，包装文本，使宽度适合内容，删除额外的右侧空白

我有一个设置宽度的表格容器，它将包含由单个字符（>）分隔的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>

这里有额外的空白，导致后续元素也换行

经过大量研究，我最接近的方法是设置宽度：文本元素的宽度为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>

我决定使用表，因为它使我更接近我所需要的，但我愿意使用任何格式，唯一的要求是它必须是纯css，而不是使用任何javascript

.text{
宽度：0.1%；
}
.桌子{
宽度：450px；
边框：1px纯黑；
}

会员俱乐部和组织
>
图书批发商
>
音乐管理

只需删除

.text {
  width:0.1%;
}

---

桌子的宽度迫使空白区域出现，不管发生什么。表格单元格有额外的空间，因此单词会在必要时换行，或者单元格没有额外的空间，因此单词会在每个单词上换行

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

td { word-break: break-all; }

.table{
宽度：450px；
边框：1px纯黑；
}
运输署{
单词break：打破一切；
}

会员俱乐部和组织
>
图书批发商
>
音乐管理
我确实考虑了这个选项，不幸的是它影响了可读性。如果这是唯一的选择，包括使用表格以外的东西，那么我可能会用其他方式来表示。是的，宽度会影响单词的断开时间/位置。如果这些保证是唯一使用的单词，并且您可以保证字体、字体大小等，那么您可以暂时不设置精确的宽度……如果表格不是固定的最小大小，有没有办法做到这一点？我可以将它包装在一个固定大小的容器中，并在内容上调整表格的大小。如果可以的话。任何固定大小的容器都会影响包装。如果没有足够的空间，一个像“组织”这样的长单词将被包装起来，而你将以空白结束。长单词是个问题，除非你能打破它们。如果可以在单词断开时使用连字符，那么这是一个选项。我完全不记得这是否只能用css实现

在

td

s上，您可能会接近，但表格的宽度将与一行中所有单词的组合一样宽。有了这些头，我想它大约是550px。

.text {
  width:0.1%;
}

td { word-break: break-all; }