html - 针对移动设备将 5 列表拆分为两部分

Question

我有一个在桌面浏览器中正确显示的 5 列表。
在移动浏览器中，它使页面太宽，并添加了我不想要的水平滚动条。
是否有媒体查询 CSS 规则可以帮助将此表拆分为 3 列/2 列垂直堆叠而不是 5 列？
示例:在移动设备上，而不是:

A  B  C  D  E
aa bb cc dd ee
ff gg hh ii jj

它应该是

A  B  C  
aa bb cc 
ff gg hh 

D  E
dd ee
ii jj

<table>
<tbody>
<tr>
<th scope="col"><strong>A</strong></th>
<th scope="col"><strong>B</strong></th>
<th scope="col"><strong>C</strong></th>
<th scope="col"><strong>D</strong></th>
<th scope="col"><strong>E</strong></th>
</tr>
<tr><td>aa</td><td>bb</td><td>cc</td><td>dd</td><td>ee</td></tr>
<tr><td>ff</td><td>gg</td><td>hh</td><td>ii</td><td>jj</td></tr>
<tr><td>ff</td><td>gg</td><td>hh</td><td>ii</td><td>jj</td></tr>
</tbody>
</table>

Answer 1

可以使用word-break避免啤酒长句的属性

.your-class {
  width: 80px;  
  word-break: break-word;
}

一个例子:

.your-class {
  width: 80px;
  word-break: break-word;
}

<div class="your-class">It is a very long string</div>