html - CSS:在td(表格)中从新行开始所有单词

Question

我有这样的代码:

<table>
<tr>
  <th>#</th>
  <th>Text</th>
</tr>
<tr>
  <td>1</td>
  <td>Long Long cell content</td>
</tr>
<tr>
  <td>2</td>
  <td>Long Long cell content</td>
</tr>
</table>

和风格:

table{
  border: 1px solid green;
}

fiddle :https://jsfiddle.net/t5rxtweo/

现在它在大分辨率下看起来如此:

但是小的:

而且我也想这样:

我可以用纯 css 来做吗？

Answer 1

你能定义“小分辨率”吗？

无论如何，这里有一个您可以玩的演示。

https://jsfiddle.net/t5rxtweo/1/

@media screen and (max-width: 360px) {
    td {
        word-spacing: 9999999px;
    }
}

<table>
<tr>
  <th>#</th>
  <th>Text</th>
</tr>
<tr>
  <td>1</td>
  <td>Long Long cell content</td>
</tr>
<tr>
  <td>2</td>
  <td>Long Long cell content</td>
</tr>
</table>