0

I followed this

which say that to have word-wrap:break-word , we need to have "table-layout: fixed" for the table element. Even then it is not working in IE8. Am I missing any fundamentals here ?

Iam attaching the screen shot of it in IE8 ans IE6 . And how the HTML is rendered in IE8. (There is scroll bar for the panel enclosing the Table in IE8.)

IE6

IE8

IE8

From the HTML rendered , i fnd that Table Layout is Fixed and the style is also applied.

But even then IE8 displays the grid in a different manner .

<table cellspacing="0" rules="all" border="0" id="ctl00_memberContentPlaceHolder_empiMemberHcidGridView" style="border-width:0px;border-style:None;height:150px;width:750px;border-collapse:collapse;**table-layout: fixed**">
            <tr class="Row" align="center">
                <td align="left" style="width:155px;white-space:nowrap;">
                                        <span id="ctl00_memberContentPlaceHolder_empiMemberHcidGridView_ctl02_typeLabel">IT</span>
                                    </td><td align="left" style="width:155px;white-space:nowrap;">
                                        <span id="ctl00_memberContentPlaceHolder_empiMemberHcidGridView_ctl02_firstNameLabel">AAA</span>
                                    </td><td align="left" style="width:155px;white-space:nowrap;">
                                        <span id="ctl00_memberContentPlaceHolder_empiMemberHcidGridView_ctl02_lastNameLabel">BBB</span>
                                    </td><td align="left" style="width:155px;white-space:nowrap;">
                                        <span id="ctl00_memberContentPlaceHolder_empiMemberHcidGridView_ctl02_appReceivedDateLabel">3/01/2011</span>
                                    </td><td align="left" style="width:155px;white-space:nowrap;**WORD-BREAK:BREAK-ALL**">
                                        <span id="ctl00_memberContentPlaceHolder_empiMemberHcidGridView_ctl02_commentsLabel">TestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTesting</span>
                                    </td>
        </table>

Any Help ? Thanks in Advance

Community
  • 1
  • 1
Ananth
  • 10,330
  • 24
  • 82
  • 109

1 Answers1

1

Practically speaking, I would not worry about word wrapping for such contrived text as sighted in your example (where there no white space).

Said that, one of the solution could be to wrap the content inside a div and apply width & word-wrap to the div. See this fiddle for example: http://jsfiddle.net/6Cm3U/1/

VinayC
  • 47,395
  • 5
  • 59
  • 72
  • @Vinay..Thanks..I see from Developer Toolbar that style "word-wrap:break-word" is applied to and not is that causing the issue ? In the link u said, style is applied to the div and style gets applied – Ananth Aug 10 '11 at 09:55
  • 1
    @Ananth, `span` is inline element, so you also need to make it `block` or `inline-block` for word break to work. see updated example http://jsfiddle.net/6Cm3U/2/ I am assuming that you are using ASP.NET label which is generating the span so apply some css class to the label to enable work break. – VinayC Aug 10 '11 at 11:43