We need to enable wrap text in lightning rich text field.  

Tried below markups including slds-scrollable_y, slds-hyphenate individually and together even in ui:outputRichText class attribute.


<div aria-label="" class="slds-rich-text-area__content slds-grow slds-wrap">
    <ui:outputRichText value="{!v.richtextFld}"/>


enter image description here

Am I doing it wrong? Appreciate any suggestions on this. Thanks.

  • What's the expected output? What are you seeing? It seems to wrap by default just fine. – sfdcfox Sep 28 '17 at 4:29
  • @sfdcfox Thanks. Just updated the question with screenshot. This is in a popover. – Pasan Eeriyagama Sep 28 '17 at 5:53
  • Did you try adding the class 'slds-popover' in the div? Like, <div aria-label="" class="slds-popover slds-rich-text-area__content slds-grow slds-wrap"> – Hemant Jain Sep 28 '17 at 6:02

You shouldn't do anything special at all. It works correctly as is without any other wrappers. Here's a very basic example I wrote up.


<aura:application extends="force:slds">
    <aura:attribute name="richText" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <p>This is just some ordinary text...</p>
    <section class="slds-popover slds-nubbin_top" role="dialog" aria-label="Dialog Title" aria-describedby="dialog-body-id-1">
        <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon" title="Close dialog">
            <lightning:icon iconName="utility:close" size="x-small" />
            <span class="slds-assistive-text">Close dialog</span>
        <div class="slds-popover__body" id="dialog-body-id-1">
            <ui:outputRichText value="{!v.richText}" />

Controller Code

    init: function(component, event, helper) {
        component.set("v.richText", "<b>Hello</b> <i>World</i> ".repeat(20));


Sample popout

| improve this answer | |
  • Thanks a lot for this. Unfortunately it's not solved. I copied the same code into component and it still ran over the component. Doubt outer table component which is embedding this has some effect. Then I tried the lightning:inputRichText with removed buttons, etc. it wrapped the text fine. But this code <lightning:inputRichText value="{!v.richTextfield}" disabled="true" disabledCategories="FORMAT_FONT,FORMAT_TEXT,FORMAT_BODY,ALIGN_TEXT,REMOVE_FORMATTING"/> did not make the field readonly. Otherwise this fixed wrapping for me. – Pasan Eeriyagama Oct 3 '17 at 1:15
  • 1
    @PasanE It's surely something to do with the CSS or layout of your items. The core CSS itself works, as I demonstrated. You might want to update your question, because the hint to your problem is going to revolve around the related code, not just the three-line snippet that you posted. – sfdcfox Oct 3 '17 at 3:25

Figured out it needs slds-cell-wrap than slds-wrap because it was used inside a table. That fixed the problem.

<div aria-label="" class="slds-rich-text-area__content slds-grow slds-cell-wrap">
    <ui:outputRichText value="{!v.richtextFld}"/>
| improve this answer | |

You can simply use word-wrap,

word-wrap - Prevents overflow of an string if its too long to fit.

    word-wrap: break-word;

And, now you can add them to the HTML div block as per your requirement. For example,

<div class="detailStyle">
| improve this answer | |

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.