Wrapping long text using h:outputText

[Dhananjay Inamdar]

I am using JSF as a front-end technology for one of my project. My application works on Tomcat web server. In my application, on one of page, I have to extract a data from database and have to display on the page.

I am extracting a data from database and populates it in the java bean. I am using h: outputText While displaying data on the jsf page. My code is as follows

<hutputText value="#{leg.transport}" styleClass="lightGray"/>

It works fine and displays data on the screen.

Problem is when data is too long in the database then all data gets displayed in one line. Horizontal scrollbar gets added to the page, as some of the data is of 1500 character length.

I will like to know the way of wrapping a text in the JSF. So that while displaying data on the page, I will wrap the text and page will display within the limit of browser.

[Henrique Sousa]

Which element is the outputText in? And what are the style rules for "lightGray" CSS class? In most HTML elements, text is wrapped correctly. Exceptions for absolutely positioned elements and those with "white-space: nowrap" CSS attribute.
As a workaround, try to define a width for the element to see if the text gets wrapped. If M$IE accepted "max-width" CSS attribute, I would recommend it. Regards

[Dhananjay Inamdar]

I have something like:

<h utputText value="Services" styleClass="lightBG" />
<h anelGrid columns="4" rowClasses="darkGray,lightGray" width="650px" cellpadding="0" cellspacing="2" border="0" >

and within this I have

<h utputText value="#{leg.transport}" styleClass="lightGray"/>

Can you please guide me in wrapping the text above. I want to avaoid the horizontal scroll bar that comes when the data length is too long.

Thanks
Dhananjay

[Henrique Sousa]

Well, the generated HTML should be something like this

<table width="650">
  <!-- header -->
  <tbody>
    <tr>
      <!-- other columns before or after -->
      <td>A very, very long text here</td>
    </tr>
  </tbody>
</table>

This is expected to work as you intend, unless some of the style rules says white-space: nowrap. If you are using Firefox it would be easy to change the td element to include white-space: normal using DOM Inspector and see what happens. Otherwise, you should do it manually. The intended result is something like this:

<table width="650">
  <!-- header -->
  <tbody>
    <tr>
      <!-- other columns before or after -->
      <td style="white-space: normal">A very long text here</td>
    </tr>
  </tbody>
</table>

If the text does not contains white spaces you have a big problem because then it will not be wrapped anyway.