Consider the following lightning input field getting the input from the user. it may be a record page, app page or home page component, it will differ based on your business need.

  <lightning:input name="userName"   label="User Name" value="{!v.userName}" readonly="{!v.readOnlyMode}"/>

The above syntax is a common way to create a text input in your lightning component. Here it will show the text values in the same line only but I need to enable word-break for edit page or record edit page.

Follow The Line Break Trick

We are going to use Aure if here , if the read only condition is true, we are going to show the user name with the help of <p> tag so by the default it will enable line break or word break in edit page. then else we can show lightning input field to get the input from the user.

<aura:if isTrue="{!v.readOnlyMode}">
    <label class="slds-form-element__label" for="form-element-01"> User Name </label>
    <p>{!v.userName}</p>
    <aura:set attribute="else">
        <lightning:input name="userName" label="User Name" value="{!v.userName}" readonly="{!v.readOnlyMode}" />
    </aura:set>
</aura:if>

That’s all cool 🙂