2

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.

Markup:

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

Output:

enter image description here

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

3
  • What's the expected output? What are you seeing? It seems to wrap by default just fine.
    – sfdcfox
    Sep 28, 2017 at 4:29
  • @sfdcfox Thanks. Just updated the question with screenshot. This is in a popover. Sep 28, 2017 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, 2017 at 6:02

3 Answers 3

5

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.


Application

<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>
        </button>
        <div class="slds-popover__body" id="dialog-body-id-1">
            <ui:outputRichText value="{!v.richText}" />
        </div>
    </section>
</aura:application>

Controller Code

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

Output:

Sample popout

2
  • 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, 2017 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, 2017 at 3:25
5

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}"/>
</div>
0

You can simply use word-wrap,

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

.detailStyle{
    word-wrap: break-word;
}

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

<div class="detailStyle">

You must log in to answer this question.

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