Solved

How to force line break in table cell..

Posted on 2004-04-20
9
18,363 Views
Last Modified: 2007-12-19
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
0
Comment
Question by:mattisflones
  • 5
  • 3
9 Comments
 
LVL 3

Accepted Solution

by:
zapthedingbat earned 250 total points
Comment Utility
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
 
LVL 9

Assisted Solution

by:pepsichris
pepsichris earned 250 total points
Comment Utility
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
 
LVL 15

Author Comment

by:mattisflones
Comment Utility
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
 
LVL 15

Author Comment

by:mattisflones
Comment Utility
Btw.. 500 on this one now...
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 15

Author Comment

by:mattisflones
Comment Utility
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
 
LVL 15

Author Comment

by:mattisflones
Comment Utility
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
 
LVL 9

Expert Comment

by:pepsichris
Comment Utility
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
 
LVL 9

Expert Comment

by:pepsichris
Comment Utility
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
 
LVL 15

Author Comment

by:mattisflones
Comment Utility
I know! Thanks.. Its only going to be used in IE 5.5+ anyway...
Ill try the hidden stuff too..
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will learn how to dynamically set the form action using jQuery.

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now