Why “word-wrap” css style doesn't work inside a <table> (GWT)?

[Tom]

We got this css to make a long string (without any space in it, URL for example) to fall into many new lines rather than just show 1 line:

.wordWrap{  word-wrap:break-word;  }

in .xml file

<table>
    <tr>
       <td>
          <g:HTMLPanel ui:field="myPanel" addStyleNames="{style.wordWrap}" > <g:Label text="Aaaaaa..very long string without any space in it... aa"> <g:/HTMLPanel>
       </td>
    </tr>
</table>

This does not work.

However, if we remove the <table> then it work fine

So Why "word-wrap" css style doesn't work inside a (GWT)?

(http://stackoverflow.com/questions/22740185/why-word-wrap-css-style-doesnt-work-inside-a-table-gwt)

[Jens]

You have to use table-layout:fixed in your CSS for the table element.

-- J.

[Tom]

i did but it look really ugly. Ex: I got a DockLayoutPanel & in the <g:center> I have a HTMLPanel that hold <table>. So if i use <table style="table-layout:fixed"> then some how the text inside the table were centralised like this

|                  Aaaaaaaaaaaaaaaaaaaaaaaaaa                               |---> this is the edge of the <g:center>

                   aaaaaaaaaaaaaaaaaaaaaaaaaa                                |
                   aaaaaaaaaaaaaaaaaaaaaaaaaa

Am i doing right?

I want the text to go through all the spaces, ex it should look like this:

Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa|

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

even i use<table width="100%"> but it didn't work.

Do you know how to fix it?

[Jens]

Do you know how to fix it?

The most basic example works: http://jsfiddle.net/84dsH/

So investigate your CSS using your browsers Dev Tools.

-- J.

[Tom]

I couldn't fix the <table> tag so I start to use Grid. But Grid din't recognize the break-word

 

<g:Grid addStyleNames="{style.myBreakWord}">  
    <g:row>
       <g:cell>
           Subject
       </g:cell>
       <g:customCell>
           <g:Label text="Aaaaaaaa....very long a...aaaaaaaaaaa" />
        </g:customCell>
     </g:row>
 </g:Grid>

in Css

.myBreakWord{

    word-wrap:break-word; 

    table-layout:fixed;

}

Is there anything wrong with my code?