我得到了一个具有固定宽度和高度的表格单元格,如果文本太大,单元格大小应该保持不变,文本应该通过overflow:Hidden隐藏.

div {
   display: table-cell
   height: 100px;
   width: 100px;
   overflow: hidden;
   vertical-align: middle;
}

然而,如果添加了太多文本,表格单元格将扩展到100px以上.有什么办法阻止它扩张吗?

文本长度应为几行,因此"空格:nowrap"解决方案不适用

推荐答案

CSS 2.1 rules,表格单元格的高度就是"内容所需的最小高度".因此,您需要使用内部标记(通常是div元素(<td><div>content</div></td>))间接限制高度,并在div元素上设置heightoverflow属性(当然,不在其上设置display: table-cell,因为这会使其高度遵守CSS 2.1表格单元格规则).

Css相关问答推荐

Tailwind仅在启用时才在按钮上设置group-hover

容器内的中心固定元件

本机CSS嵌套混乱

用两步函数内插的css动画值

如何缩小 Select 元素的背景图像?

使用 CSS 定位悬停/弹出 div - 字形浏览器网页

如何使按钮:之后像按钮:之前一样可见

Z Index 复杂性 - 如何将组件放置在 div 内部以相对于其级别外部的组件具有更高的 z-index 值?

应用边框半径的 iframe 在 4 个角上有细曲线

为什么同一个 CSS 类连续出现两次

循环一个 sass/scss 变量以生成 css 变量

使用 CSS 无限期地闪烁两个不同持续时间的文本

将 CSS 注入 Shadow 根.然而风格正在受到影响

单击时 HTML 输入字段未获得焦点

如何动态生成用逗号分隔的类列表?

在 Twitter Bootstrap 中创建圆角的正确方法

是否允许在链接中嵌套链接?

在 react-native 中使用 flex 使项目粘在底部

CSS关键帧动画CPU占用率高,应该这样吗?

仅当存在 2 个类时,您可以使用 CSS 定位元素吗?