How do I make a Lightning Card title wrap to the next line on a small screen?

Question

I am using Lightning Card components and a couple of them have rather long titles. All look fine on a desktop, but on a phone, some of the titles are truncated. Is there a way to make the Lightning Card title wrap to multiple lines on a small screen?

<lightning:card title="This is a really long title for a Lightning Card">
.
.
.
</lightning:card>

Answer 1

We were able to get the Title to wrap on a narrow screen with the following CSS (in the parent component)

.THIS .slds-truncate {
    white-space: normal;
}

Answer 2

Hard to tell without seeing your code, but Css wise, if you properly scope the element, you can use:

overflow-wrap and set it to break-word if you want the text displayed over multiple lines.

Additionally, you might want to a@media query in your CSS for this to work on "small" screen only.