GWT - HTML widget - how not to wrap words

Question

I just faced an interesting thing concerning HTML widget. The thing is...

If a word length is too long per line then HTML widget becomes wider to have it all placed in

so my question is... is it possible to make HTML widget to cut by pieces long words not to getting wider itself?

Comparing to Swing, I mean the effect something like JTextArea does when word wrapping is off (see image)

enter image description here

EDIT

I tried to use css word-break: break-all; here is the code:

composite code:

public MyTestUI(){//constructor

 html.setStyleName("my-test");
}

public void setLongWord(String word)//method
{
  html.setHTML(word);
}

css

.my-test {
color:gray;
font-family:verdana;
white-space: normal;
word-break: break-all;
}

... the css works in Chrome but doesn't in FF :( How to make the word breaking the crossbrowser one ?

Any useful comment is much appreciated

score 1 · Answer 1 · answered Dec 13 '12 at 05:27

1

Use CSS property word-wrap:break-word as described in following link. This will work even if the HTML widget is having static height and width.

answered Dec 13 '12 at 05:27

PVR

I tried break-word for HTML widget CSS html.setStyleName("my-style"); with following way html.setHTML(too_long_word); but the word does not break :( What am I doing wrong? – user592704 Dec 13 '12 at 16:51
1

Would it be possible for you to give your css code ? And also have a look at the parent css may not be getting overridden. – PVR Dec 14 '12 at 06:05
1

Try to use word-wrap:break-word, rather than word-break:break-all. This should definitely work. And try to analyze it with firebug or something else dependent on browser. – PVR Dec 15 '12 at 14:53

score 0 · Answer 2 · edited May 23 '17 at 11:48

0

Add a CSS style to your HTML widget to break long words:

EDIT:

I stay corrected: word-wrap is a better option. See more:

edited May 23 '17 at 11:48

Community

answered Dec 13 '12 at 01:09

Andrei Volgin

Should HTML widget have static width then? – user592704 Dec 13 '12 at 03:22
It should have width. It can be either set by you explicitly (in pixels or in percent), or it can derive its width from its parent element (i.e. 100% of the parent element). Otherwise the browser would not know at which width to start breaking words. – Andrei Volgin Dec 13 '12 at 06:40
What if HTML widget will contain just ONE too long word? Will it be broken then? – user592704 Dec 13 '12 at 16:32
Yes. It breaks all long words. – Andrei Volgin Dec 13 '12 at 17:53
Does FF supports it? I tried but it seems like word-break: break-all works in Google Chrome but FF still doesn't break long word :( Is there the most optimal way? – user592704 Dec 13 '12 at 18:11

score 0 · Answer 3 · answered Dec 13 '12 at 04:31

0

Use CSS property word-break:normal; or try word-break:hyphenate;

answered Dec 13 '12 at 04:31

Abhijith Nagaraja

"Normal" is the default setting - it won't break any words. – Andrei Volgin Dec 13 '12 at 06:41
I am not pretty sure what exactly the 'hyphenate' does? Give more details please – user592704 Dec 13 '12 at 16:34
i Know normal wont break any words, i just gave him the options what all one can use with that property – Abhijith Nagaraja Dec 14 '12 at 02:34

3 Answers3