javascript - 如果使用 javascript/jquery 和 css 存在水平滚动，则将内容移至下一行

Question

我有一个包含多个 div 的部分...每当该部分出现水平滚动时，我如何将隐藏的 div 移动到下一行...

HTML

<section id="a">
<div class="num">
<div class="num">
<div class="num">
<div class="num">
<div class="num">
<div class="num">
</section>

CSS

.num
{
 position: relative;  display: table-cell;
}

Answer 1

我相信你需要两件事:

• Media Queries
• word-wrap:break-word;

媒体查询，因为您应该根据屏幕尺寸进行测试和设计，而不一定是像您看起来想要做的那样的个别设备。

word-wrap:break-word; 因为如果其中一个 div 元素太长，这将防止出现水平滚动 - 元素的内容将简单地跳到下一行。

您会找到一个合适的屏幕尺寸，您希望在该屏幕尺寸下进行换行，并将 word-wrap:break-word; 应用于 div.num 里面的元素。

然后，在针对较大设备的媒体查询中，您根本不会包含它，并且如果需要，您的 div 元素将保持在水平滚动的一行。