Игнорируйте теги внутри div, пока не нажмете

Question

У меня есть следующая функция, которая расширяет текст, заключенный в слова, внутри тега tr, если щелкнуть тег.

$(document).ready(function () {
    $('tr').click(function () {
        var $this = $(this);
        if($this.css('white-space') === 'nowrap') {
            $this.css('white-space', 'normal');
        }
        else {
            $this.css('white-space', 'nowrap');
        }
    });
});

Я использую эту функцию, поскольку хочу, чтобы текст в ячейках таблиц отображался только в одной строке (по сути, скрывая внутренний тег p), пока пользователь не щелкнет по нему.Проблема, однако, в том, что nowrap разбивает строки для тегов br и p, и у меня есть несколько из них для целей форматирования.Как включить эти теги, только когда нажата tr?

html:

<td>
   <div>
       {{ post.person }}
          <p>
              Message:
              <br>
              {{ post.message }}
          </p>
   </div>
</td>

Answer 1

Вы можете добавить максимальную высоту (1.2em - высота строки по умолчанию относительно размера шрифта) к вашему div и установить overflow: hidden.Тогда вы увидите только 1 строку.После нажатия переключите другой класс, в котором установлены overflow: visible и height: auto.

.

$(document).ready(function() {
  $('tr').click(function() {
    var $this = $(this);
    $(this).find(".a").toggleClass("expand");
  });
});

.a{
  height: 1.2em;
  overflow: hidden;
}

.expand{
  height: auto;
  overflow: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div class="a">
        {{ post.person }}
        <p>
          Message:
          <br> {{ post.message }}
        </p>
      </div>
    </td>
  </tr>
</table>