14

Is there a way to tell h:outputText of JSF (2.0) to insert a line break (or even better: A custom string like "-") into very long words within strings? My problem is that my data-table (PrimeFaces) gets too wide when I have a very long word within a string with no spaces. It works when I have a long text "normal" words, then the next word is printed in the next line.

While I could use a converter, this would still mean that I have to look for long words within a string and then cut them every time I display the text. This would work somehow for a small amount of data, but needs a lot of processing power when the database is getting bigger (and it will).

I also could scan the string for long words before inserting into the database, which would mean that I only have to process the string once, but also that i'm not able to fully reconstruct the original string if I'd ever need it.

Does anyone have any input on this?

Thank you in advance and best regards, Robert

Improve this question
2
  • @ Robert M. Hi i have the same problem. Balus C answer not working for me but i am using jsf1.2 if u show ur code then it will be useful for me. Commented Jun 9, 2014 at 15:16
  • BalusC's solution does not depend on the JSF version in use. It is a plain CSS solution. The styleClass attribute exists in JSF 1.2 and renders a "class" attribute to the resulting HTML output. If it doesn't work this is a problem in your HTML/CSS. You could try to set a fixed width for the parent HTML element. Commented Jun 27, 2014 at 7:56

6 Answers 6

Reset to default
20

Set CSS word-wrap property of the element in question to break-word.

<h:outputText styleClass="someClass" />

with

.someClass { word-wrap: break-word; }
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

this is not working for me. The css class is showing in matched css rules in firebug, but I dnt know why long words are not breaking.
@djaqeel: A prerequirement is that the element has a fixed width.
Oh thanks. You are right. When I give fixed width, it works fine, but I want to give % widht. In %age width, word-wrapping is fine but the span itself takes the whole width(as if it calculates the span's width before applying word-wrap).
11 
 <h:outputText value="Very Wordy&lt;br /&gt;Table Column&lt;br /&gt;Heading" escape="false" />

Output

Very Wordy Table Column Heading
Improve this answer

1 Comment

Source: blog.michaelscepaniak.com
4

This can be accomplished by two steps

1)Apply style as table-layout:fixed to the panelGrid

E.g: <h:panelGrid style="table-layout:fixed;">

2) Then apply style of word-wrap break-word to the <h:outputText /> as below.

E.g: <h:outputText style="word-wrap:break-word;">

Hope this helps.

Improve this answer

Comments

2

if you have very long word in String you can use word-break: break-all; like this:

<h:outputText value="111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111" style="word-break: break-all;"/>

but it required CSS3. link: word-break

Improve this answer

Comments

0

you can use h:inputTextarea rather than h:outputText , don't remember set readonly attribute true and remove border like this:

<h:inputTextarea rows="10" cols="50" readonly="true" value="multiline String" style="border-color: white" />
Improve this answer

Comments

0

The accepted answer doesn't work for me. Using "white-space: normal" fixed it.

<h:outputText value="long text" style="white-space: normal"/>
Improve this answer

1 Comment

Please don't post only code as an answer, but also provide an explanation of what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.