我试图在 Firefox Jetpack SDK 插件面板的表格单元格中显示 URL。我试图主要实现 2 种不同的布局，但都没有用。我在 SO 上使用了各种线程来尝试找到解决方案，但我想保持这个干净(没有 JS 技巧或外部库)，不想指定确切的大小，这些线程的一半答案让我感到困惑或没有工作，因为我的情况略有不同。 CSS 本身也让我感到困惑，因为它非常不直观，所以不用说我的尝试可能几乎是有效的。 Jetpack 面板在大小调整方面似乎也表现得很奇怪，因此增加了复杂性。
面板内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<table>
<thead>
<tr>
<th class="status">Status</th>
<th class="message">Message</th>
<th class="url">URL</th>
</tr>
</thead>
<tbody id="entries">
</tbody>
</table>
</body>
</html>
添加一个 td 行
const table = document.getElementById("entries");
function entry(data) {
let tr = document.createElement("tr");
for (let i in data) {
if (data.hasOwnProperty(i)) {
let td = document.createElement("td");
if (i == "url") {
let a = document.createElement("a");
a.href = data[i];
a.textContent = data[i];
a.addEventListener("click", function(event) {
event.preventDefault();
event.stopPropagation();
});
td.appendChild(a);
} else {
td.textContent = data[i];
}
td.setAttribute("class", i);
tr.appendChild(td);
}
}
table.appendChild(tr);
}
TL:DR 为状态和消息添加一个 td，并在最终的 td 中使用 anchor 标记来显示 url。
尝试的 CSS
table {
width: 100%;
max-width: 100%;
}
td.url a {
width: 100%;
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
}
期望的结果
我不想看到水平滚动条出现!面板本身应该是自动调整大小的(通过 Firefox)，以适合用户设备的未知大小显示其中的表格。表格应填满面板的宽度，但不超过它并导致水平溢出。
url 应该显示在一行中，当它达到 td 的最大宽度时用省略号截断(这是隐含的，来自表格的最大大小减去最小宽度以显示其他 tds)。
我不想指定确切的宽度或任何类似的东西，以保留响应式设计和用户偏好，如默认字体和字体大小。
TL:DR 我想要实现的是一个具有自然大小的表格，2 列自然显示，1 列在超过隐式剩余大小时被截断。
当前结果:http://i.imgur.com/xnephA0.png (表的最大尺寸发生了什么变化？)
之前的一次尝试，当我希望 url 以正好 2 行的纯文本显示时，用省略号截断:http://i.imgur.com/tUOTrKu.png (没错，它什么都没做)
感谢任何能帮助我找到解决方案的人，我个人开始沉浸在对我来说不再有意义的 CSS 语句中。
现在是 2015 年了，CSS 仍然非常笨拙，如果不花几个小时处理通常看起来不相关的事情，比如位置声明，我们仍然无法实现这样的基本废话？如果基本演示仍然像在 Haskell 中编写延迟加载数据库一样复杂，那么 CSS 如何实现其作为演示技术的目的？ http://img.pandawhale.com/post-18529-Peter-Griffin-blinds-CSS-gif-I-lEO1.gif
最佳答案
根据更多修补的结果和其他帖子的信息花絮，text-overflow 仅在以下情况下有效
- 元素有display: block
- 元素的宽度为 px
所以除非我发疯/迟钝，否则这几乎意味着没有使用 CSS 使页面既可呈现又可响应的事情，因为显然有一半的基本呈现技巧仍然需要废话，比如设置宽度以 px 为单位，撤消响应能力。
有人和我一起签署这份请愿书，让起草 CSS 规范的人被解雇吗？第 3 次迭代，它仍然完全无法兑现它的 promise 。
关于HTML:无法使表格单元格中的 URL 符合我想要的方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30144992/