3

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

1 Answer 1

3

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

6
  • looked like a feasible idea. Just tried it but unfortunately didn't work for me
    – MarcLee
    Aug 14, 2020 at 9:20
  • Could you share on what didn't work?
    – Raul
    Aug 14, 2020 at 9:23
  • I made change exactly as suggested above and it made no difference. The title was still truncated.
    – MarcLee
    Aug 14, 2020 at 9:26
  • hmm, that is strange, I updated the output in the answer
    – Raul
    Aug 14, 2020 at 9:36
  • 2
    Ah I see, you should Disable Caching Setting During Development.
    – Raul
    Aug 14, 2020 at 9:53

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .