How to force line break in table cell..

Hi Guys..
I have a tablecell witch is filled dynamically.. The cell can contain lets say 15 letters.
If one text is 16+ Letters my design gets screwed up.. How do i break the text in two lines even if its one  word???? What part of HTML 101 did i miss??
And no, i cant use arrays and so on.. this is MANY rows..

Please.. tired.. help..

Mattis
LVL 15
mattisflonesAsked:
Who is Participating?
 
zapthedingbatConnect With a Mentor Commented:
The <br> tag in the html will force a "hard" return

Another option is to apply the "word-wrap:break-word;" css property to your table cell.

eg:
<TD STYLE="word-wrap:break-word;">
veryveryveryveryveryveryveryveryveryveryverylongtext
</TD>

ref: http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/wordwrap.asp
0
 
pepsichrisConnect With a Mentor Commented:
Depends on whether you're constraining it by no. letters or width in pixels or whatever.

If no. letters, then you say it will be filled dynamically - which language will you be using?  You can break it up Server Side in any language pretty easily by adding <br>s in there.

If width then it's tricky.  The: word-wrap:break-word mentioned above only works in IE.  You can use an attribute: table-layout:fixed with which you then have a choice:

Either

overflow: scroll

Which'll add scrollbars to it to let you see it all.  Or:

overflow: hidden

Which'll show the first part of the word and hide the rest.

I'm pretty sure there's some nasty JavaScript out there which does the job, but it's messy and causes the page to keep reloading while it works itself out.  Best bet is to do it Server Side.
0
 
mattisflonesAuthor Commented:
Hi guys, thanx for the input..
I`ve tried STYLE="word-wrap:break-word;" on the TD`s, P`s, TR`s and DIV`s... Doesnt work...

The table is 100Px wide, i need the tablecell to adjust height according to rows of text inside each cell.

The overflow:hidden sounds like a solution, but how to apply??? it isnt a Style is it? And could you give me examples on how to apply the table-layout:fixed thingey??
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
mattisflonesAuthor Commented:
Btw.. 500 on this one now...
0
 
mattisflonesAuthor Commented:
This is the code.. The table is extended by repeats outside it..

<table width="100" border="0" cellpadding="2" cellspacing="2">
              <tr>
                <td align="left" valign="top"> <div align="left"><font size="1" face="Times New Roman, Times, serif"><%= DoDateTime((Recordset1.Fields.Item("Doppdatert").Value), 2, 1030) %></font><br>
                    <a href="nyheter.asp?nid=<%=(Recordset1.Fields.Item("nid").Value)%>"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><%=left(Recordset1.Fields.Item("header").Value,35)%></font></a></div></td>
              </tr>
            </table>
0
 
mattisflonesAuthor Commented:
Actually this one worked...

<td align="left" valign="top" width="100" STYLE="word-wrap:break-word;width:89;left:0">

89 instead of 100...

Thanks for your efforts guys!
0
 
pepsichrisCommented:
A bit like so:

<html>
<head>
<title>Whatever</title>

<style type="text/css">

table {
table-layout:fixed;
width: 200px
}


.scroller {
overflow: hidden;
text-align: left
}

</style>


</head>

<body bgcolor="#FFFFFF">

<table>
              <tr>
                <td><div class="scroller">Veryveryveryveryveryveryveryveryveryveryverylongword<br>
                    <a href="something.htm">quitequitequitequitelongword</a></div></td>
              </tr>
            </table>
</body>
0
 
pepsichrisCommented:
As I said before, "word-wrap:break-word;" will only work in IE, Versions 5.5 upwards, incidentally, so a great deal of your users won't see that and it'll screw it up big time for them.
0
 
mattisflonesAuthor Commented:
I know! Thanks.. Its only going to be used in IE 5.5+ anyway...
Ill try the hidden stuff too..
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.