title: Bootstrap 4 'text-truncate' class positions the text below
body: <p>I try to adding an ellipsis on title if it's too long. I want respect the responsive layout and I don't want adding fix width to <em>card-title</em>.</p>
  
  <p>I use <em>text-truncate</em> to add ellipsis on card title.</p>
  
  <p>Cards are in column to use image at left of text.</p>
  
  <p><a href="https://i.stack.imgur.com/uT4H8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uT4H8.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          @foreach($posts as $post)
          &lt;div class="col-lg-6 p-1"&gt;
              &lt;div class="card border-0"&gt;
                  &lt;div class="row no-gutters"&gt;
                      &lt;div class="col-auto"&gt;
                          &lt;img src="{{ $post-&gt;featured_image ? $post-&gt;featured_image : '/images/placeholder-image.png' }}" class="img-fluid" width="150" height="150" alt="{{ $post-&gt;title }}" style="width: 150px; height: 150px; object-fit: cover;"&gt;
                      &lt;/div&gt;
                      &lt;div class="col"&gt;
                          &lt;div class="card-body"&gt;
                              &lt;h3 class="card-title text-truncate"&gt;{{ $post-&gt;title }}&lt;/h3&gt;
                              &lt;p class="card-text m-0"&gt;{{ $post-&gt;short_summary }}&lt;/p&gt;
                              &lt;small&gt;{{ $post-&gt;published_at-&gt;format('M d') }} — {{ $post-&gt;read_time }}&lt;/small&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;a href="{{ route('post', $post-&gt;slug) }}" class="stretched-link"&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          @endforeach
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But if I add <em>text-truncate</em> class, the title and content are down.</p>
  
  <p><a href="https://i.stack.imgur.com/OuxUX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OuxUX.png" alt="enter image description here"></a></p>