Не зная всех вводных, трудно что-либо предполагать. Но способов тут не много, поэтому представлю два варианта:
JS : правильно, но медленно...
+ Можно стилями творить что угодно.
– При слишком большом количестве ячеек, может подтормаживать.
– Возможно мерцание ячеек во время их обхода.
К тому же, неизвестно, как поведёт себя этот способ, если в ячейках будут теги.
/*
Функция добавления класса ячейке таблицы,
в случае обнаружения переноса текста.
*/
function fOverStringDetect() {
// Проходим по всем "TD"
Array.prototype.slice.call(document.querySelector('.OverStringDetect').querySelectorAll('td')).forEach(function(oTD) {
// Добавляем "редактируемость" в ячейках
oTD.contentEditable = true; // Для примера (убрать после тестов)
// Меняем стиль отображения ячейки с "table-cell" на "inline"
oTD.style.display = 'inline';
// Если количество "строк" больше, чем 1...
(oTD.getClientRects().length > 1) ?
// добавляем класс,
oTD.classList.add('overload'):
// иначе - удаляем
oTD.classList.remove('overload');
// Возвращаем ячейке стиль отображения "по умолчанию"
oTD.style.display = '';
});
}
window.onload = function() {
/* Слушатель событий DOM */
var observer = new MutationObserver(function(mutations) {
fOverStringDetect();
});
observer.observe(document.querySelector('.OverStringDetect'), {
characterData: true,
subtree: true
});
fOverStringDetect();
}
table.OverStringDetect {
border: 1px solid #080;
width: 480px;
}
td {
border: 1px dotted rgba(0, 0, 255, .5);
white-space: pre-line;
word-break: break-all;
}
.overload {
box-shadow: inset 1px 1px 20px red;
}
<p>Попробуте изменить значения в ячейках:</p>
<table class="OverStringDetect">
<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th></tr>
<tr><td>1</td> <td>12 345</td><td>12 3456 7890</td><td>1234 567890</td><td>1 999999999</td><td>1234 5</td><td>12 345</td><td>12 3456 7890</td><td>1234 567890</td></tr>
<tr><td>123 45</td><td>123 4567890</td><td>1 9 9 9 8</td><td>1234 567890</td><td>1</td><td>1234 5</td><td>123 4567890</td><td>1 9 9 9 8</td><td>1234 567890</td></tr>
<tr><td>1234 567890</td><td>1898 9090</td><td>1234 5</td><td>1234 567890</td><td>1</td><td>1234 5</td><td>1234 5</td><td>1234 567890</td><td>1</td></tr>
</table>
CSS : "обмануть судьбу"...
+ CSS only. Только натив: один псевдоэлемент и пара свойств.
± Поведение предсказуемо и неизменно.
– Ооочень ограниченные возможности стилизации.
Возможно, такой способ вполне устроит, в виду своей простоты, но не устроит в плане дизайна и удобства зрительного восприятия.
/*
Функция добавления всем ячейкам
таблицы атрибута "contentEditable".
*/
function fAddEditableProp() {
// Проходим по всем "TD"
Array.prototype.slice.call(document.querySelector('.OverStringDetect').querySelectorAll('td')).forEach(function(oTD) {
// Добавляем "редактируемость" в ячейках
oTD.contentEditable = true;
});
}
window.onload = function() {
fAddEditableProp();
}
table.OverStringDetect {
border: 1px solid #080;
width: 480px;
}
td {
border: 1px dotted rgba(0, 0, 255, .5);
white-space: pre-line;
word-break: break-all;
color: #f00;
}
td::first-line {
color: #080;
}
<p>Попробуте изменить значения в ячейках:</p>
<table class="OverStringDetect">
<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th></tr>
<tr><td>1</td> <td>12 345</td><td>12 3456 7890</td><td>1234 567890</td><td>1 999999999</td><td>1234 5</td><td>12 345</td><td>12 3456 7890</td><td>1234 567890</td></tr>
<tr><td>123 45</td><td>123 4567890</td><td>1 9 9 9 8</td><td>1234 567890</td><td>1</td><td>1234 5</td><td>123 4567890</td><td>1 9 9 9 8</td><td>1234 567890</td></tr>
<tr><td>1234 567890</td><td>1898 9090</td><td>1234 5</td><td>1234 567890</td><td>1</td><td>1234 5</td><td>1234 5</td><td>1234 567890</td><td>1</td></tr>
</table>
Все примеры интерактивны. Бо́льшую часть кода составляют комментарии и вспомогательные элементы (функции, стили и т.п.), и могут/должны быть удалены в реальном проекте.
css
нет, наjs
, лучше бросьте эту идеюtd
или чем-то оборачиваются при вставке (p
,span
и т.п.) ?