Html 如何在调整表格大小的过程中剪裁文本的中心列，但保留两个边列？

我有一个包含三列文本的表格，我无法正确调整其大小。中间一列包含大量非关键文本，在调整页面大小时应使用省略号进行剪裁，但两个边缘列包含无法剪裁的文本。所有文本都不应被包装。下面是一些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>

当我调整页面大小时，中间的列永远不会被剪裁，省略号也永远不会显示。相反，当表格单元格达到内容的宽度时，它们就停止收缩。我已经玩了很多不同的宽度设置，但没有得到任何工作正常。我也尝试过tablelayout:fixed，但这只会导致所有列的大小相等。有什么想法吗

---

编辑：我在Chrome中看到这个，但是跨浏览器的解决方案是理想的。

< P>我不能说这是否可以在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");
        });
    }
 }
});

---

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

这是一个有趣的解决方案，但它隐藏了中间一栏中的所有文本。我更喜欢中间的列逐渐调整大小，在末尾加一个省略号，而不是隐藏。@DLaw我相信类似的东西也可以用一些代码来管理。然而，要使它在所有浏览器中顺利运行可能是一个问题。

 $(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");
        });
    }
 }
});