Word-wrap around a specific character

Question

I have a string which looks like an absolute path : Dir1\Important\Info 123\test. I have that string in a h:outputText tag.

I want to word-wrap that string just before ot just after the \ character. The default wrapping in css is for whitespaces. I can't use that because I have whitespaces in the some names. I want the string to break only at the \ character.

How can I achive such word-wrapping? Any help is welcomed :)

PS: I can use <wbr> to give it a hint, but the problem with the whitespaces stays.

PSS: The tag looks like this:

<h:outputText id="fullPath"           value="#{configItemDtoSearch.fullPath}" 
                                      style="color:#03A9F4; font-style: italic; white-space: nowrap; width: 200;"/>

score 1 · Answer 1 · answered Jan 14 '16 at 08:30

1

If you set the CSS property to no-wrap and then add <wbr /> tags after each \ character then you should get the desired wrapping.

Here is an example - https://jsfiddle.net/f1t29gb4/. This works in Chrome but I've not tested it elsewhere.

answered Jan 14 '16 at 08:30

BrettJephson

416
5
13

I replaced the normal whitespaces with the non-breaking one and added the . When I use the `nowrap` property. The string doesn't break anywhere. When I omit the `white-space` property the string still breaks at the whitespaces (the replaced with non-breaking ones). Any ideas ? – user3719857 Jan 14 '16 at 09:15
What browser are you seeing those results in? – BrettJephson Jan 14 '16 at 09:30
In chrome, also in firefox. – user3719857 Jan 14 '16 at 09:31
Could you post a code sample on jsfiddle or similar? So I can see it running in browser. – BrettJephson Jan 14 '16 at 09:36

score 1 · Accepted Answer · answered Jan 14 '16 at 08:36

1

You can use   instead of the white space characters.   is a non breaking space character. So the string should look like:

Dir1\<wbr />Important\<wbr />Info&nbsp;123\<wbr />test

answered Jan 14 '16 at 08:36

Anton

2,458
2
18
30

I replaced the normal whitespaces with the non-breaking one and added the . When I use the `nowrap` property. The string doesn't break anywhere. When I omit the `white-space` property the string still breaks at the whitespaces (the replaced with non-breaking ones). Any ideas ? – user3719857 Jan 14 '16 at 09:13
1

Here is a [working fiddle](https://jsfiddle.net/h2j4k3vk/2/) - please notice the white-space is set to "normal" (same as if it was omitted at all). Have you checked the HTML markup generated by the h:outputText tag? Is the final string in the HTML same as the one I posted above? – Anton Jan 14 '16 at 09:43

Word-wrap around a specific character

2 Answers2