2

did anyone was able to work with lightning:tab and find way to wrap text in label of tab?

    <lightning:tabset selectedTabId="{!v.selTabId}" >
            <lightning:tab aura:id="tab1" id="tab1">
                <aura:set attribute="label">
                    <span style="word-wrap: break-word; width: 60px; white-space: normal;">
                         <!- Some long tab label -->
                    </span>
                </aura:set>
                <aura:set attribute="body">
                    <!-- Some body -->
                </aura:set>
            </lightning:tab>
  <lightning:tabset>
  • 2
    Can you try this? .slds-tabs--default__item{ width: 100px; } .slds-tabs--default__link{ height: auto !important; line-height: normal !important; } – SE_User May 22 '17 at 12:14
  • Can you specify how did you achieve this? – SFDC Apr 10 at 16:09
0
.THIS .slds-tabs_default__link {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    text-decoration: none;
    cursor: pointer;
    height: 2.5rem;
    line-height: 2.5rem;
    color: currentColor;
    border: 0;
    text-transform: inherit;
}
.THIS .slds-truncate {
    max-width: 130px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

You can modify max-width attribute value accordingly, it will wrap the label and show with ..

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.