+ Start a Discussion
Pasan   EeriyagamaPasan Eeriyagama 

How to enable wrap text in ui:outputRichText?

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 slds-scrollable_y slds-hyphenate">
	<ui:outputRichText value="{!v.richtextFld}"/>
</div>

Am I doing it wrong? Appreciate any suggestions on this. 
Akshay_DhimanAkshay_Dhiman
Hi PasanEeriyagama ,

In order to get the wrap text content , use Lightning tag.
Below is a code for the same . Hope it helps you

Aura Component Code :
 
<aura:component >
   <aura:attribute name="abc" type="string" />
   <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
 <div id="texteditor">
    <div class="slds-form-element">
         <label class="slds-form-element__label" for="textareaSample2">Rich Text Editor</label>
         <div class="slds-form-element__control">
             <lightning:inputRichText value="{!v.abc}"/>
         </div>
     </div>
 </div>
</aura:component>

Aura App Code :
 
<aura:application extends="force:slds">
   <c:richtexteditor/>
</aura:application>

Aura Controller Code :
 
({
doInit: function (c, e, h) {
       c.set("v.abc",'This is the testing of rich text editor for word wrap content. Hope it helps you !!');
}
})

SCREENSHOT :

User-added image


Regards,
Akshay
Pasan   EeriyagamaPasan Eeriyagama
Hi Akshay,

Thank you for the reply. But Lightning yet does not have output control, Therefore we had to use ui:outputRichText. I tried this approach, but it wasn't possible to make it readonly. Disabled attribute still not working. I doubt it's in beta yet. Otherwise this is the most appropriate way to do it. 
Pasan   EeriyagamaPasan Eeriyagama
Figured out it myself. it needed slds-cell-wrap than slds-wrap because it was used inside a table.