Search code examples
cssjsfprimefacesline-breaks

Force linebreak OutputLabel


I have an outputLabel which contains a lot of text (about 5000 characters of text), the outputLabel has to add a new line after the line is about 200px, is this possible?

<p:outputLabel value="#{object.body}" />
<p:outputLabel value="#{object.body}" style="width: 200px" />

This code doesn't work:

public String getBodyWithLineBreaks(){
    return body.replaceAll("(.{100})", "$1<br/>");
}

It is also not a solution because this method does not look if a word is finished, it just starts a new line at the 100th character.

Some more code:

<p:dataTable id="dataTable" var="object" value="#{notificationOverview.objects}">

     <!--Some more columns...-->  

    <p:rowExpansion>  
        <h:panelGrid id="display" columns="2" cellpadding="4" style="width:300px;"  
                                                 styleClass=" ui-widget-content grid">  
        <f:facet name="header">Notification Information</f:facet>
        <h:outputText value="Sender:"/>
        <h:outputText value="#{object.sender.username}"/>

        <h:outputText value="Time send:"/>
        <h:outputText value="#{object.dateSend}">
            <f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss"/>
        </h:outputText>

   <h:outputText value="Title:"/>
   <h:outputText value="#{object.title}"/>
</h:panelGrid>

<br/><br/>

<div style='width: 200px;'>
   <h:outputText value="#{object.body}" />
</div>
</p:rowExpansion>
</p:dataTable>

Solution

  • The <p:outputLabel> generates a HTML <label> element which is by default an inline element. You can't set the dimensions of an inline element. You can only set it on a block element.

    One way would be adding display: block to the style.

    <p:outputLabel value="#{object.body}" style="display: block; width: 200px;" />
    

    Additionally, given that this is inside a <p:dataTable> cell, which has by default its CSS white-space property set to nowrap, you need to set it back to normal. This can be set on the same component, but this is preferably to be set on the parent <p:column> itself:

    <p:column style="white-space: normal;">
    

    Note: as part of a good practice, you should prefer styleClass over style.


    Unrelated to the concrete problem, the HTML <label> element is designed to label an input element which is identified by for attribute. I.e. when you click on it, the associated input element retrieves focus (and a checkbox/radiobutton get selected). When validation is performed, the label is used to identify the input element. However, the fact that you're trying to display 5000 characters inside a label element, which is completely user unfriendly when used as a real label, suggests that you're actually abusing the label for the wrong purpose of displaying "plain text". You should be using <h:outputText> instead. This generates a HTML <span> element which is by default also an inline element. So the above answer applies on that as well:

    <h:outputText value="#{object.body}" style="display: block; width: 200px;" />