fix the text overflow on RecipeCard

[dorj222]

What type of PR is this?

(REQUIRED)

• bug

What this PR does / why we need it:

(REQUIRED)

This PR fixes the recipe description text overflow issue when the text length is longer than 500 characters. If the description text is longer than 350 characters, only the first 350 characters will be shown on a card view.

New Card View with the long description:

Which issue(s) this PR fixes:

#1829

(REQUIRED)

Release Notes

(REQUIRED)

 the recipe description text overflow issue on a card view has been fixed

[michael-genson]

I was curious if this issue persisted on the condensed (mobile) view, and it looks like it's solved for using CSS:

.headerClass {
  white-space: nowrap;
  word-break: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

Then I checked out why the normal card didn't do this, but then I noticed that it does, just only for the name. Can you try implementing this with a CSS class similar to the mobile view?

Something like this:

<v-card-text class="v-card--text-show white--text">
  <div class="headerClass">
    {{ description }}
  </div>
</v-card-text>

But probably with a new class to show more than a single line

[dorj222]

Hello, thank you so much for your feedback! I added a wrapper class that utilizes the WebKit-line-clamp property, and now at most first 8 lines of the description will be displayed, and the remaining overflow text will be hidden.

The screenshot example: