Q:

Ignore tags inside div until clicked

I have the following function, which expands word-wrapped text within a tr tag, if the tag is clicked. 
$(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');
        }
    });
});

I'm using this function as I want text within the tables cells to display only on one row (in essence hiding the inner p tag), until clicked on by a user. The problem, however, is that nowrap breaks lines for br and p tags, and I have several of these for formatting purposes. How can I turn on these tags, only when the tr is clicked?
html:
<td>
   <div>
       {{ post.person }}
          <p>
              Message:
              <br>
              {{ post.message }}
          </p>
   </div>
</td>

A:

You can add a maximum height (1.2em is the default line height relative to the font size) to your div and set overflow: hidden. Then you'll see only 1 line. Once clicked, toggle another class that set overflow: visible and 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>

