Возможно, вы не опубликовали весь код ... Потому что эта таблица совсем не "отзывчива".
Но у меня есть проблема. На самом деле вам нужно определить, когда содержимое ячейки обернуто.
Это непросто в ячейке таблицы, потому что высота ячейки также зависит от высоты другой ячейки в той же строке.
Исходя из этого другого ответа SO , я использовал временный «testDiv», добавленный в конец документа, к которому я применил ширину ячейки. Затем, как предлагает другой ответ, я добавляю контент слово за словом и проверяю высоту testDiv на предмет изменений. Если при добавлении слов происходит изменение высоты, это, очевидно, означает, что произошло завертывание.
Я только добавил этот класс в ваш CSS ... Я не сделал никаких других изменений.
.test{
background-color:orange;
}
Вот код:
function adjustPadding() {
// Create a test div and append it to the end of the document
var testDiv = $("<div id='wrapTest'>");
$("html").append($("<div id='wrapTest'>"));
var testDiv = $("#wrapTest");
// Loop the cells
$("td:not(.table-generic-btn-container):not(.input-amount-row):not(.table-action)").each(function() {
// Get the cell's content, splitted by the spaces
var text = $(this).text().split(" ");
// Get the cells width, including the padding
var width = $(this).outerWidth();
// If there's more than one word, test!
if(text.length > 0){
// Empty, set the width and add the first word
testDiv.empty().css({"width":width}).append(text[0]);
// Get the height
var height = testDiv.height();
// For each other words, compare the new height
for(i=1;i<text.length;i++){
testDiv.append(" "+text[i]);
// If height increased, there's a wrap!
if(testDiv.height() > height){
$(this).addClass("test");
// Do whatever you wish on those cells here!
//$(this).css({"padding-top": "8px"});
//$(this).css({"padding-bottom": "8px"});
}
}
} // End if length>0
}); // End each
// Remove the test div
testDiv.remove();
}
Рабочая демонстрация по CodePen