title: display text on only 1 line without breaking words and terminate with ellipses
body: <p>EDITS: Changed the <b> ellipses</b> to <b> ellipsis </b> as pointed out. And the common consensus is that I will need to use js for the same. Thank you. </p>
  
  <p>ORIGINAL QUESTION:
  I am trying to display a card that shows only one line of the description, and terminates the line with ellipses. On clicking, the entire description should be available. I have been able to display only 1 line by specifying </p>
  
  <pre><code>overflow:hidden; 
  whitespace:nowrap;
  text-overflow:ellipsis;
  </code></pre>
  
  <p>but it cuts off the last word. Is there a way to display only one line without breaking the word?</p>
  
  <p>Here is a link to my codepen: <a href="https://codepen.io/npnair/pen/BaNmXyM?editors=1100" rel="nofollow noreferrer">https://codepen.io/npnair/pen/BaNmXyM?editors=1100</a></p>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;div class="search-card"&gt;
      &lt;img class="search-card-img-left"
          src="https://image.shutterstock.com/image-photo/spring-blossom-background-beautiful-nature-260nw-1033292395.jpg"&gt;
      &lt;div class="search-card-body"&gt;
          &lt;h2 class="search-card-title"&gt; Trump tells Bar he can stay - but makes clear that the tweets will continue &lt;/h2&gt;
          &lt;p class="search-desc"&gt; President has full faith and confidence in his hand-picked AG- and something else to test the overflow property of the description.and something else to test the overflow property of the description. and something else to test the overflow property of the description.&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the css:</p>
  
  <pre><code>.search-card {
      width: 800px;
      background-color: lightgray;
      border: 1px solid #888888;
      border-radius: 0.25rem;
      height: 120px;
  }
  
  .search-card-img-left {
      padding:20px;
      height:80px;
      width: 80px;
      border:1px solid;
      float:left;
  }
  .search-card-title {
      margin: 0.25rem;
      border: 1px solid;
      text-align:left;
  }
  
  .search-card-body {
      text-align:left;
      display:inline;
  }
  
  .search-desc{
      text-overflow: ellipsis;
      overflow-wrap: break-word;
      display:inline;
      word-break: keep-all;
  }
  </code></pre>