How to enable wrap text in ui:outputRichText?

Question

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:

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

Answer 1

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:

Answer 2

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>

Answer 3

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