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. 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"> 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

  • 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. 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}"/>

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">

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.