Блог

У меня есть таблица с тремя столбцами текста, размер которых мне не удается изменить должным образом. В среднем столбце содержится много некритичного текста, который следует обрезать (с многоточием) при изменении размера страницы, но в двух крайних столбцах содержится текст, который нельзя обрезать. Ни один текст не должен быть перенесен. Вот несколько примеров 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, но кроссбраузерное решение было бы идеальным.

Я не могу сказать, можно ли это сделать исключительно в 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");
        });
    }
 }
});
  

Я не пробовал это каким-либо строгим образом, но это делает свою работу. Итак, это элементарная демонстрация осуществимости.