Im trying to use the following markup

        <aura:iteration items="{!v.faqs}" var="faq">
                <lightning:accordionSection label="{!faq.Name}" class="tWrap >
                    <ui:outputRichText value="{!faq.Body__c}" /> 

Im looking to override the app.css file with some custom css in the accordionSection so the text wraps and it doesnt truncate in smaller screens but I'm not being very successful. the lightning:accordion is based on the accordion from the lightning design system. The section I want to toggle in the markup is nested in the button attribute:

class="slds-truncate" title="Accordion summary">Accordion summary<

.slds-truncate {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Im trying to change "white-space" to "normal"


.THIS .tWrap {
white-space: normal;

Anyway I can achieve this or a different way of doing it?

Thanks in advance

1 Answer 1


You can override the slds-truncate class directly by adding the following to your CSS:

.THIS .slds-truncate {
    white-space: normal !important;
  • good point! ill try that..but wouldn't that override it in the whole component? how can I just localise it to an area?
    – JPG
    Mar 13, 2018 at 11:19
  • If you want to localise it, add a class before it like this: .THIS .myclass .slds-truncate, and use "myclass" as a class on the actual accordion itself, it should traverse correctly that way!
    – Tim
    Mar 13, 2018 at 11:20
  • Instead of having !important, try increasing specificity.
    – Raul
    Mar 13, 2018 at 11:30
  • Thanks Rahul, will try that approach too it seems its more best practice when it comes to CSS
    – JPG
    Mar 13, 2018 at 12:31
  • using @Timothy's approach I was able to specify elements a couple levels up and got it to work while avoiding !important Thanks all
    – JPG
    Mar 13, 2018 at 12:40

You must log in to answer this question.

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