title: Horizontal v-card-title with ellipsis?
body: <p>I'm using Vuetify 2.5 and trying to create horizontal cards as per <a href="https://vuetifyjs.com/en/components/cards/" rel="nofollow noreferrer">the docs</a>, creating a flex-box <code>div</code> to float the title and subtitle to the side of the avatar using <code>d-flex flex-no-wrap</code>.</p>
  <p>I want overly long titles to be trunkated with ellipsis, but with the &quot;horizontal mode&quot; the <code>div</code> with the title and the subtitle extends outside the v-card, so the overflow directives don't apply until outside the v-card (or even not at all, since it looks like the title box has grown to accomodate the complete title):</p>
  <p><a href="https://i.stack.imgur.com/qKAk8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qKAk8.png" alt="Title overflowing in horizontal mode" /></a></p>
  <p>If the <code>d-flex</code> is removed the ellipsing works correctly:</p>
  <p><a href="https://i.stack.imgur.com/6E7bN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6E7bN.png" alt="enter image description here" /></a></p>
  <p>What am I missing about the <code>v-card</code> elements?.</p>
  <p><a href="https://codepen.io/thoni56/pen/RwoJGVj" rel="nofollow noreferrer">Here's a codepen</a> with the example.</p>