html - 如何将包含宽 HTML 的表格单元格的内容限制为特定的整体宽度？

Question

我有一个代表用户帖子“提要”的表格(不是一组 div)。表格位于页面的中间，该页面本身以表格形式排列:左侧一张，中间一张带有提要，右侧一张。

问题是有时人们会添加从 HTML 源(例如 MailChimp)复制粘贴的帖子，并且源包括具有自己宽度的表格，或宽 div，或大图像，并且帖子比我页面上的“进纸宽度”。发生这种情况时，提要会拉伸(stretch)内容，将页面右侧的单元格进一步推向右侧。

我试着在表格周围或表格中的单元格中添加这样的东西:

<div style="max-width: 395px;">

这确实具有停止向中间 Feed 右侧推送和拉伸(stretch)列的效果，但对于长帖子，中间 Feed 本身的内容现在会扩展并显示在上 它之前推送的右侧元素的顶部。

我的问题是是否可以在中间提要表周围放置一个 div，以便 (1) 它被限制为 395 像素宽度，以及 (2) 即使表内的单元格包含其他表，内容也不会延伸到表外、大图像或文本。

文本可以自动换行，必要时图像可以被截断。

如果在表格中不可能，我可以使用 div 重写整个内容并使其比其他方式更好吗？

谢谢。

Answer 1

有你的解释，没有例子，我们帮不了你太多，但我想我可以帮助你。

使用这个 CSS 属性:

my-cell { 
    box-sizing: border-box;
    width: 100%;
    border: solid #5B6DCD 10px;
    padding: 5px;
}

您可以访问 MDN 链接:box-sizing Mozilla developer's

或者您可以尝试在您的 div 容器或单元格中使用此 css 属性 overflow: hidden;

希望对你有帮助。