如何在'td'标签内节省没有换行符的空间？

Question

我正在使用

white-space: pre;

它节省了空间，但同时也保存了newLine符号。

这里是我所拥有的：

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

td {
  white-space: pre;
}

<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </tr>
  <tr>
    <td>John       </td>
    <td>Smith</td>
    <td>50</td>
    <td>2881 Habberton RD #WC89 Spring Dale

3107 E 18th AVE Tampa, FL 33605</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    <td>3201 Attems CT Glen Allen, VA 23060</td>
  </tr>
</table>

我可以使用带有CSS的newLine符号吗？

Answer 1

您要吗？

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

td {
  white-space: no-wrap;
}

<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </tr>
  <tr>
    <td>John       </td>
    <td>Smith</td>
    <td>50</td>
    <td>2881 Habberton RD #WC89 Spring Dale

3107 E 18th AVE Tampa, FL 33605</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    <td>3201 Attems CT Glen Allen, VA 23060</td>
  </tr>
</table>