Question

我试图在Firefox Jetpack SDK插件面板中的表格单元格中显示网址。我试图主要实现两种不同的布局，但都没有奏效。我在SO上使用各种线程试图找到解决方案，但我想保持这个清洁（没有JS技巧或外部库），不想指定确切的大小，一半的答案在那些线程让我感到困惑或者没有用，因为我的情况略有不同。 CSS本身也让我感到困惑，因为它有多么不直观，所以不用说我的尝试可能几乎都是高效的。 Jetpack Panel在尺寸设置方面也表现得很奇怪，因此增加了复杂性。

小组内容

<!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中使用锚标记来显示URL。

尝试使用CSS

table {
width: 100%;
max-width: 100%;
}
td.url a {
width: 100%;
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
}

期望的结果

我不希望看到水平滚动条出现！面板本身应该是自动调整大小（通过Firefox），在其中显示一个未知大小的表，该表应该适合用户的设备。该表应该填满面板的宽度而不超过它并导致水平溢出。

网址应该显示在一行中，当达到td的最大宽度（这是隐含的，来自表格的最大尺寸减去要显示的最小宽度）时，用省略号剪切其他tds）。

我不想指定确切的宽度或任何排序，以保留响应式设计和用户首选项，如默认字体和字体大小。

TL：DR我想要实现的是一个具有自然大小的表，2列自然显示，1列在超出隐含剩余大小时被截断。

目前的结果：http://i.imgur.com/xnephA0.png（桌子的最大尺寸发生了什么？）

之前的尝试，当我希望网址只显示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

Answer 1

根据来自其他帖子的更多修补和花絮的结果，文本溢出仅在

元素有display：block
元素的宽度为px

因此，除非我疯狂/迟钝，否则这几乎意味着没有使用CSS来使页面既具有可呈现性又具有响应性，因为显然有一半的基本演示技巧仍然需要像设置一样的垃圾px中的宽度，撤消响应性。

任何与我一起签署此请愿书的人都可以解雇那些制定CSS规范的人吗？第三次迭代，它仍然无法实现它所承诺的目标。

HTML：无法使表格单元格中的网址符合我的要求

1 个答案: