html - 带省略号的表格单元格出现故障

Question

我有一个表格需要拉伸(stretch) 100% 的页面。第一列在调整浏览器大小时的文本内容上设置了一个省略号。它有效，但表格单元格右侧有一个 200 像素的空白 block (宽度由我的 CSS 宽度计算 100% - 200 像素确定)。

.ff_table {
	  width: 100%;
	}
	.ff_table_td1 {
	  display: block;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	  width: calc(100% - 200px);
	}
	.ff_table_td2,
	.ff_table_td3 {
	  width: 100px;
	}

<table class="ff_table" border="1">
  <tr>
    <td class="ff_table_td1">thequickbrownfoxjumpsoverthelazydogtwice</td>
    <td class="ff_table_td2">thequickbrown</td>
    <td class="ff_table_td3">thequickbrown</td>
  </tr>
</table>

Answer 1

我测试了它，我意识到你的问题是什么。

移除 width: calc(100% - 200px); 的空格

width: calc(100%-200px);

空格会影响 CSS。

但是，这仍然允许 100% 的单元格长度，因此您看不到省略号。将 width 更改为 90%，您会看到它仍然存在。

因此，您需要在您的 css 中添加一个称为媒体查询的东西。

@media all and (max-width: 480px) {
   .ff_table_td1 { width:200px; }
}

这允许您在浏览器低于特定宽度时更改列的宽度。你可以在里面放任何你想要的条件。

---