Html 如何响应地截断CSS布局中的列？

我有以下HTML和CSS：

演示
.postInfo{
显示：表格单元格；
填充：2px；
宽度：128px；
}
.后缩图{
背景尺寸：128px；
高度：72px；
宽度：128px；
}
.邮递员{
显示：块；
身高：100%；
}
.职称{
-webkit线夹：2个；
-网络工具包盒方向：垂直；
显示：-网络工具包盒；
溢出：隐藏；
文本溢出：省略号；
}
测试1包含大量文本，限制为显示两行
测试2
测试3
测试4
测试5

您只需

显示：内联块而不是
显示：表格单元格在
.postInfo
中



演示
.postInfo{
显示：内联块；
填充：2px；
宽度：128px；
}
.后缩图{
背景尺寸：128px；
高度：72px；
宽度：128px；
}
.邮递员{
显示：块；
身高：100%；
}
.职称{
-webkit线夹：2个；
-网络工具包盒方向：垂直；
显示：-网络工具包盒；
溢出：隐藏；
文本溢出：省略号；
}
测试1
测试2
测试3
测试4
测试5
我已经更改了您的代码结构并适应了flexbox，它应该可以根据您的需要工作。如果您想限制主div的宽度，只需为
mainDiv



演示
.postInfo{
显示器：flex；
柔性流动：柱；
对齐项目：居中；
证明内容：中心；
填充：2px；
宽度：200px；
}
.后缩图{
背景尺寸：128px；
高度：72px；
宽度：100%；
}
.邮递员{
显示：块；
身高：100%；
}
.职称{
-webkit线夹：2个；
-网络工具包盒方向：垂直；
显示：-网络工具包盒；
溢出：隐藏；
文本溢出：省略号；
}
梅因迪夫先生{
显示器：flex；
柔性包装：包装；
}
测试1
测试2
测试3
测试4
测试5
如果您知道每个块的高度，可以使用以下方法：

在瓷砖上应用
display:inline block
，这样瓷砖就会很好地包裹起来
在容器上设置
max height
和
overflow:hidden
仅显示1行
因为缩略图已经有了一个静态高度，所以我使用了该高度的最大高度+1行文本，如示例所示：

别忘了将屏幕拖动到移动视图，以查看瓷砖消失



演示
.集装箱{
高度：98px；
溢出：隐藏；
}
.postInfo{
显示：内联块；
填充：2px；
宽度：128px；
}
.后缩图{
背景尺寸：128px；
高度：72px；
宽度：128px；
}
.邮递员{
显示：块；
身高：100%；
}
.职称{
-webkit线夹：2个；
-网络工具包盒方向：垂直；
显示：-网络工具包盒；
溢出：隐藏；
文本溢出：省略号；
}
测试1
测试2
测试3
测试4
测试5
这并没有截断屏幕上不适合的列，就我所知，它只是使这些列变大或变小以填充屏幕。我编辑了我的答案，并添加了宽度：postInfo为100px，mainDiv为flex wrap:wrap。这就是您正在寻找的解决方案吗？不幸的是，不是。我将更新我的问题，以更清楚地说明我在寻找什么。这只会使屏幕上不适合的项目移动到新行，它不会截断屏幕上不适合的行。截断行是什么意思？在达到项目的最大数量后进行剪切（因此基本上您希望有一行并显示尽可能多的项目，而忽略其余项目）？如果是，只需设置溢出：隐藏；在换行的div（keep display:inline block；）上，我正在更改您的答案，以反映您评论中的两个建议。它似乎不符合我的要求。在缩略图下面会有一行或两行文本。这在只有一行的情况下效果很好。然后我建议将最大宽度设置为两行高度。我个人更喜欢这样，所以它们的尺寸相同。您也可以允许它收缩到1行或2行，但它们仍然包装相同。@mtcdood请参阅我的编辑谢谢更新，这似乎完成了我试图完成的任务。