1

В таблице нужно реализовать такой механизм:

  • Если в ячейке помещается строка текста без переноса, то для этой ячейки применяется один стиль;
  • Если строка целиком не помещается, и текст переносится на вторую строку, то применяется другой стиль.

Можно ли это сделать с помощью CSS и JS? (Лучше чистый CSS.)

4
  • на чистом css нет, на js, лучше бросьте эту идею
    – ThisMan
    6 сен 2018 в 13:54
  • @Dedotmoroz таблица сильно большая?
    – UModeL
    6 сен 2018 в 14:12
  • таблица большая и плюс подгружается динамически.
    – Dedotmoroz
    6 сен 2018 в 14:54
  • @Dedotmoroz данные записываются непосредственно в ячейки td или чем-то оборачиваются при вставке (p, span и т.п.) ?
    – UModeL
    6 сен 2018 в 15:16

1 ответ 1

1

Не зная всех вводных, трудно что-либо предполагать. Но способов тут не много, поэтому представлю два варианта:

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>

Все примеры интерактивны. Бо́льшую часть кода составляют комментарии и вспомогательные элементы (функции, стили и т.п.), и могут/должны быть удалены в реальном проекте.

2
  • @ThisMan Если задача заключается только в визуальном контроле за появлением длинных строк, то такой простой вариант, думаю, приемлем. Но, если нужно и сами значения контролировать, то да - глаза сломаешь, даже с более щадящими цветами)) Это, как альтернатива - понятно же, что одним CSS тут много не наколдуешь).
    – UModeL
    7 сен 2018 в 6:34
  • getClientRects().length > 1 пока одно решение
    – Dedotmoroz
    7 сен 2018 в 12:14

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.