省略号未出现在表格单元格中
在给定的 HTML 表格中,当单元格内的文本超出其定义时,通常应出现省略号宽度。但是,提供的示例中的文本并未按预期截断。
调查问题
检查输出时,单元格宽度报告为 139 像素,表明内容应比指定的 50px 宽。检查 CSS 样式,我们注意到以下设置:
<code class="css">td { border: 1px solid black; width: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }</code>
省略号的所有必需属性似乎都存在。那么,为什么它不起作用?
解决方案 1:显示:块
一种解决方案是将以下属性添加到 CSS:
<code class="css">td { display: block; }</code>
这显式地将表格单元格的显示类型设置为块级,使它们表现得像独立容器并启用省略号。
解决方案 2:表格布局和宽度
另一种方法是设置 table-layout:fixed;为表格,以及定义宽度:
<code class="css">table { table-layout: fixed; width: 200px; }</code>
这会强制表格具有固定布局并显式设置其宽度,防止内容宽度可能影响单元格宽度计算的问题。
以上是为什么省略号没有出现在我的表格单元格中?的详细内容。更多信息请关注PHP中文网其他相关文章!