How to force line break in table cell..

Posted on 2004-04-20
Medium Priority
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..

Question by:mattisflones
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3

Accepted Solution

zapthedingbat earned 750 total points
ID: 10866943
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.

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

ref: http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/wordwrap.asp

Assisted Solution

pepsichris earned 750 total points
ID: 10867083
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:


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.
LVL 15

Author Comment

ID: 10867226
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??
Get MySQL database support online, now!

At Percona’s web store you can order your MySQL database support needs in minutes. No hassles, no fuss, just pick and click. Pay online with a credit card.

LVL 15

Author Comment

ID: 10867236
Btw.. 500 on this one now...
LVL 15

Author Comment

ID: 10867246
This is the code.. The table is extended by repeats outside it..

<table width="100" border="0" cellpadding="2" cellspacing="2">
                <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>
LVL 15

Author Comment

ID: 10867344
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!

Expert Comment

ID: 10867370
A bit like so:


<style type="text/css">

table {
width: 200px

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



<body bgcolor="#FFFFFF">

                <td><div class="scroller">Veryveryveryveryveryveryveryveryveryveryverylongword<br>
                    <a href="something.htm">quitequitequitequitelongword</a></div></td>

Expert Comment

ID: 10867381
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.
LVL 15

Author Comment

ID: 10870822
I know! Thanks.. Its only going to be used in IE 5.5+ anyway...
Ill try the hidden stuff too..

Featured Post

Learn how to optimize MySQL for your business need

With the increasing importance of apps & networks in both business & personal interconnections, perfor. has become one of the key metrics of successful communication. This ebook is a hands-on business-case-driven guide to understanding MySQL query parameter tuning & database perf

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

800 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