JSF outputText overflows

Question

I am trying to show status comments inside a panel with below code:

<p:panel>
    <ui:repeat var="Comment" value="#{Status.commentList}">
        <h:outputText value="#{Comment.Text}"/>
    </ui:repeat>
</p:panel>

It seems when the comments are so long, text is overflowing from the panel. I've investigated it and found out h:outputText is generating a span and tried to solve this via CSS:

<h:outputText value="#{Comment.Text}"
    style="width: 100px!important; overflow-x: scroll!important;"/> 

Giving a fixed width and overflow-x:scroll should do the trick but it renders span much wider, even I've set it as 100px, it renders it as 400 pixels taking no notice of !important.

Answer 1

<h:outputText value="#{Comment.Text}"
    style="width: 100px; overflow-x: scroll; display:block;"/> 

Is the correct way. W3 says about display:block;

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block boxes in a block formatting context collapse.

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's content area may shrink due to the floats).

This proofs why my text was overflowing it needs to be handled as a context value.