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

Question

我正在使用

white-space: pre;

它节省了空间，但也节省了换行符号。

这是我的:

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 排除换行符号吗？

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>