html - 如何在调整表格大小时剪切中间的文本列，但单独保留 2 个侧列？

Question

我有一个包含三列文本的表格，但我无法正确调整其大小。中间列包含许多非关键文本，在调整页面大小时应将其剪裁(带有省略号)，但两个边缘列包含无法剪裁的文本。任何文本都不应换行。下面是一些 HTML 示例:

<table id="resize-table">
<thead>
    <tr>
        <th class="col-1">Column 1</th>
        <th class="col-2">Column 2</th>
        <th class="col-3">Column 3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="col-1">Unclippable text</td>
        <td class="col-2">Clippable text that is very long. Clippable text that is very long.</td>
        <td class="col-3">Unclippable text</td>
    </tr>
</tbody>

这是我正在使用的 CSS:

#resize-table{
    width:50%;
    border-collapse:collapse;
}
#resize-table th{
    padding:0.2em;
    border:1px solid black; 
}
#resize-table td{
    padding:0.2em;
    border:1px solid black;
    white-space:nowrap;
}
#resize-table .col-2{
    overflow: hidden;
    text-overflow: ellipsis;
}

当我调整页面大小时，中间的列永远不会被剪掉，省略号也永远不会显示。相反，表格单元格在达到内容的宽度时才停止收缩。我玩过很多不同的宽度设置，但没有任何东西可以正常工作。我也试过 table-layout:fixed 但这只会导致所有列的大小都被平均调整。有什么想法吗？

编辑:我正在 Chrome 中查看此内容，但跨浏览器解决方案将是理想的。

Answer 1

我不能说这是否可以完全在 CSS 中完成，但如果您考虑使用一些 jQuery，您也许能够实现类似的功能。请考虑以下事项。

 $(window).resize(function() {
  //if the table gets less that 300 say
  if ($("#resize-table").width() < 300) {
      //class small added so we do not repeat the operation unnecessarily
      if (!$(".col-2").hasClass("small")) {
        $(".col-2").each(function(){
            //put the content in a hidden div for later and only display the ellipses
            $(this).html("..." + "<div class='content' style='display:none'>" + $(this).html() + "</div>").addClass("small");
        });           
    }
} else {
    //else the table is large enough so
    if ($(".col-2").hasClass("small")) {
        $(".col-2").each(function() {
            //copy the td content back out of the hidden div
            $(this).html($(this).find(".content").html()).removeClass("small");
        });
    }
 }
});

现在，我还没有以任何严格的方式尝试过这个，但它完成了工作。因此，这是初步的可行性论证。