function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Charni WigginsCharni Wiggins 

Visualforce page, word break (css) does not work on long text field

I have a simple VF page for a site, styles will not apply to a long text field that I display in either apex:outputtext or a even a div... The field just runs off the page - and does not respect width set by an outer container. Neither of the following will work (using word-break).. Please help!
  
<apex:outputField value="{!o.Description}" style="word-break: breakword;"></apex:outputField> 

<div class="slds-text-title_caps slds-p-top_small" style="word-break: breakword;">{!o.Description}</div>

 
Deepali KulshresthaDeepali Kulshrestha
Hi Charni,

In your VF Page you have used the "CSS"word-break: breakword;"
 which seems like to be the wrong declaration of the 

property.

Please change your style in code :
  
<apex:outputField value="{!o.Description}" 
style="word-break: breakword;">
</apex:outputField> 


<div class="slds-text-title_caps slds-p-top_small" style="word-break: breakword;">{!o.Description}</div>

to this:

<apex:outputField value="{!o.Description}" style="word-break: break-word;">
</apex:outputField> 


<div class="slds-text-title_caps slds-p-top_small" style="word-break: breakword;">{!o.Description}</div>

For more information on this style please refer to the following link as it may be helpful in solving your query:
https://www.w3schools.com/cssref/css3_pr_word-break.asp

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.


Thanks and Regards,

Deepali Kulshrestha.