[SalesForce] How to wrap lightning-card’s title

We have an LWC and sometimes the title can be really long. I have seen How do I make a Lightning Card title wrap to the next line on a small screen? but that did not help.

Any other suggestions? 

    <lightning-card  variant="Narrow" title={displayText} icon-name="standard:account">

here displayText is passed in as a parameter on the Lightning record page:

<property label="Display Sub-Text" name="displaySubText" type="String"/>

enter image description here

Update: I wonder if this is the reason why it is not working Target inner elements of standard Lightning Web Components with CSS

Best Answer

In documentation the description of title in lightning card says:

Placeholder for the card title, which can be represented by a header or h1 element. The title is displayed at the top of the card, to the right of the icon. Alternatively, use the title attribute if you don't need to pass in extra markup in your title.

Using this information, you could use a slot for placing HTML markup instead of an attribute:

<lightning-card  variant="Narrow" icon-name="standard:account">
    <h1 slot="title" class="no-wrap">{displayText}</h1>
</lightning-card>

Borrowing the solution from the mentioned post in your question, now you can apply CSS to the title:

.no-wrap {
    white-space: normal;
}

Output:

enter image description here

Related Topic