javascript - 如何使用css使表格不溢出

Question

我有this fiddle 。它用于了解您想要了解的某个万智牌卡牌或系列的信息。如果您要在输入中输入 LEA，然后点击 Find Set 按钮，它会返回有关 Limited Edition Alpha 集的信息。唯一的问题是这不会将表格保留在窗口内； table 溢出来了。如果您输入 Sen Triplets 并点击Find Card，它会返回Sen Triplets 的卡片信息。这张 table 位于窗口内，如何让设置的 table 也这样做？

Answer 1

出现显示问题是因为 LEA“助推器”数据集被解释为一个长词。诸如“common,common,common,...”之类的东西被浏览器视为一个事物而不是多个不同的词。 CSS 在大多数现代浏览器中使用 word-break 属性来处理这个问题。 Here is one possible solution所有更改的地方都是 CSS。因为 word-break 允许将单词换行到多行，所以您的表格不会再搞砸了。此外，必须在规则中添加宽度，否则最左边的列看起来很糟糕。

tr, th, td { 
    border: 1px solid black;
    text-align: center;
    word-break: break-word;
    min-width: 200px;
}

但是，您遇到的真正问题是您试图使一个数组(助推器数据集)显示为一个字符串。默认情况下，当您试图强制它成为一个字符串时，它只用一个逗号连接在一起。如果您处理数据是数组的情况 like so ，您根本不必更改 CSS...因为您不再有一个冗长的单词，因此您可以更轻松地允许换行。

for(var i in set) if(i != "cards") {
    row = $("<tr>").appendTo(con);
    row.append($("<th>").text(i));
    if(typeof set[i] === 'string') {
        row.append($("<td>").text(set[i]));
        // note, you shouldn't assume everything in your data is ONLY a
        // string or an array... other cases should be handled.
    } else {
        // join arrays together with ", " instead of ","
        row.append($("<td>").text(set[i].join(", ")));
    }
}