首页 > web前端 > css教程 > 为什么省略号没有出现在我的表格单元格中?

为什么省略号没有出现在我的表格单元格中?

Susan Sarandon
发布: 2024-11-04 22:59:02
原创
851 人浏览过

Why Isn't Ellipsis Appearing in My Table Cells?

省略号未出现在表格单元格中

在给定的 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板