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">

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.


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;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.