Search code examples
cssinternet-explorerfirefoxhtml-tableword-wrap

Wrapping long text in IE and Firefox


I have a problem... I have some long hyperlinks that are plain text that I need to wrap... I've looked for hour and haven't found a way that successfully does it on both Firefox and Internet Explorer. It works fine on Firefox, no problems, but on IE it stretches the table.

I could really use some help to fix this.

Here is the CSS I have, though it says word-wrap isn't valid, I've also tried doing table-layout:fixed.

.wordwrap
{
    display:inline-block;
    word-wrap:break-word;
    overflow:hidden;
}

and here is the code in the aspx.cs file

tr = new TableRow();
tc = new TableCell();
tc.ColumnSpan = 4;
tc.CssClass = "title";
tc.Text = "Comments";
tr.Cells.Add(tc);
table.Rows.Add(tr);

for (int i = 0; i < dv.Count; i++)
{
    tr = new TableRow();
    tc = new TableCell();
    tc.ColumnSpan = 4;
    tc.Wrap = true;

    tc.CssClass = "wordwrap";
    if (Request.QueryString["edit"] == null)
        tc.Text = dv[i]["fulldescription"].ToString();
    else
    {
        tc.Text = "<a href=\"editComment.aspx?id=" + dv[i]["id"].ToString() + "&oid=" + Request.QueryString["id"]
                        + "&aid=" + dr["id"].ToString() + "&edit=1\">" + dv[i]["fulldescription"].ToString() + "</a>";
                }

    tr.Cells.Add(tc);
    table.Rows.Add(tr);
}

If you need anything else, let me know...really all I care about is the if part working for now.. that's the part the customer sees.

Edit: edited generated html

    <tr>
    <td colspan="4" class="title">Comments</td>
</tr><tr>
    <td colspan="4">These are some words that are displayed for this comment http://www.themostaweseomesthyperlinkeverbecauseitneverends.com/index.htm.</td>
</tr><tr>
    <td colspan="4">These are some words that are displayed for this commnet with more http://www.uab.edu/......./.</td>
</tr><tr>
    <td colspan="4">These are some words that are displayed for this commnet with more and maybe more http://www.themostaweseomesthyperlinkeverbecauseitneverendsdaskldklkdaskdkjldkljalkjsdkljdslkjdskljkljdsakljdskjldsakljlkjdsakljsdakljsdalkjdskljsdalkjlkjdsalkjsdaklsdalksdalksdlkjdslkjsldkjslkjdajalkasdkljlkjdsalkjdsalkjdsalkjadslkjlkjsdalkjdsalkjdsalkjdsalkjlkdsalkjdsalkjdaslkjsadklakdsakldsjdslakdjjldksdjdklslskdjdakldlkdajkdljkdajkdjkdjalkkdjlkajdlkjadjdajdajkdakjdaadljdakjadjdkjkadlkjdaljkdalkjadklkldajlkjdalkjdalkjdalkjdalkjdalkjdkajlkdadaklkdalkjdalkjdlkjdalkjdakldkajldkjalkjdaldkjalkjdalkjdalkjdakljdalkjdalkjljkadlkjdalkjdalkjlkdjalkjdadjalkldjalkjadadkjlkljdadjlkdlakjkljdakaljdlkjdalkjdakjladljkadkaldjlkjdakljadkjldalkkljdadakdakljkladjl.com/index.htm</td>

</tr><tr>                          
    <td colspan="4">Theehese are some words that are displayed for this commnet with more and maybe morhese are some words that are displayed for this commnet with more and maybe morhese are some words that are displayed for this commnet with more and maybe morhese are some words that are displayed for this commnet with more and maybe more and more</a></td>
   </tr>

Solution

  • Have you tried setting the class on the A tag (instead of the TD), and then only setting word-wrap: break-word;?

    This works for me in a test docuemnt in IE 7-9, as well as in Chrome and FF.