Vocabulary: Don't let the title in the image component to flow on multiple lines

[makkoncept]

Description
If the title of the image is long enough, then it is displayed on multiple lines. This would not look very aesthetic for the images that are narrow and short.

Alternatives
One alternative is to change the text-overflow to _ellipsis_. Also, the _title_ attribute of the HTML element can be set so that the user can see the full title in the tooltip when they hover over it.

Additional context
This would be particularly beneficial for cc-search extension because it is more likely to face this problem. This fix would prevent some ugly vocabulary rules overriding on the extension.

Screenshots

Want to take up?

No

[LarrySul]

Hi @makkoncept I can take this up .

[makkoncept]

No one seems to be working on this, therefore you can take this up. Tagging @dhruvkb for confirmation.

[LarrySul]

Alright

[LarrySul]

Fixed the issue.
I made use of style attribute text-overflow and set value to ellipsis.
PR #368..

[dhruvkb]

@LarrySul sorry for the delay, please go ahead and open a PR.

[dhruvkb]

@makkoncept you can now add the is-ellipsised class on the title to limit text to one line with ellipsis, but it will still reveal the full text on hover, serving your purposes.