Force cell wrapping? 2

codeWarrior456 · Jul 8, 2003

Does anyone know how to force cell wrapping to occur? Here is the problem. I have an ASP page with a table on it. I need the cells in the table to be an exact width so that everything on the page lines up correctly. The problem that I am having though is that the table gets all of its values from a database. Some of the cells in the table contain comments, and some of these comments either have words that are longer than the cell width or several words strung together with no space between them. As a result the browser just expands the cell and this ends up messing up the spacing. What I want it to do though is just wrap the text, kind of like Excel does.

Anyone have any ideas on how to get this to work? Thanks in advance.

dwarfthrower · Jul 8, 2003

You won't be able to do it using HTML alone. You will need to use javascript to chop your text up into lines of x characters.

greedyzebra · Jul 8, 2003

If I understand your question correctly, I can offer you one possible solution.

Specify the size of your table cells:

<td style="width:100">
If you specify in pixels, wrapping will occur automatically.

You can also accomplish this with percentages.
<td style="width:25%">
Say you have four table cells contained within a row. You can specify each to take up 25% of the table (or you can provide different percentages for each cell--perhaps one consistently contains longer/more data than the others--just make sure the percentages total 100). The same will hold true... Your text will be wrapped automatically.

Hope that helps.

codeWarrior456 · Jul 9, 2003

Greedyzebra, your suggestion didn't seem to work. Here is an example of the scenario I have:

<%@ Language=VBScript %>
<% Option Explicit %>
<% Response.Buffer = True %>
<HTML>

<HEAD>
<TITLE>Test Page</TITLE>
</HEAD>

<%
Dim strComment
strComment = "AComment"
%>

<BODY>
<TABLE style="width:75" cellSpacing=1 cellPadding=1 border=1>
<TR style="width:75">
<TD style="width:25">1</TD>
<TD style="width:25">2</TD>
<TD style="width:25">3</TD>
</TR>
<TR style="width:75">
<TD style="width:25">4</TD>
<TD style="width:25">5</TD>
<TD style="width:25">6</TD>
</TR>
<TR style="width:75">
<TD style="width:25"><%=strComment%></TD>
<TD style="width:25"><%=strComment%></TD>
<TD style="width:25"><%=strComment%></TD>
</TR>
</TABLE>
</BODY>
</HTML>

The broswer just stretches the cells, instead of forcing a wrap like Excel would.

codeWarrior456 · Jul 9, 2003

Dwarfthrower,

Are you suggesting to examine every comment field and then chop it up accordingly, or do you have a better way in mind. There are several comments on this page/report and processing time would be slowed dramatically if I had to examine every comment field.

ChrisHunt · Jul 9, 2003

I think that's exactly what he's suggesting. It shouldn't take too long to perform this function, though I'd do it in your ASP code rather than in Javascript. I don't speak ASP, but can you write a function that returns a suitably chopped-up version of whatever you pass it? You might also experiment with the (non-standard but widely supported) <wbr> tag for defining line break points.

However, any approach, particularly one based on numbers of characters (which can vary a lot in width), is going to be pretty hit-or-miss. You'd be much better off redesigning your page so it doesn't break when the table resizes - it's easier than fighting standard browser behaviour.

-- Chris Hunt
Extra Connections Ltd

http://www.extracon.com

The real world's OK for a visit, but you wouldn't want to LIVE there!

Einstein47 · Jul 9, 2003

You see the width attribute should be better named "minimum width" because all browsers will stretch the cell if the content requires it. But older Netscape 4 wouldn't even completely support width if the cell had no content.

Height and Width are somethings that are quite nebulously defined especially when the content can become larger than the defined cell.

CSS does have a "clip" attribute where you can clip the content to a specific size, but I have never used it so I don't know the details.

No help - but hopefully informative

Einstein47
("Vision without action is a daydream - Action without vision is a nightmare. Japanese Proverb&quot

codeWarrior456 · Jul 9, 2003

Hey guys, thanks for all the suggestions. I finally figured out a way that I could get the word wrap to work. You can use the CSS style style="word-wrap:break-word". This worked really well for me. You can check out documentation on this at Microsoft's site. Here is the link:

http://msdn.microsoft.com/library/d...uthor/dhtml/reference/properties/wordwrap.asp

nhoh · Mar 17, 2004

Hi codeWarrior456,

This is a great link but this doesn't seem to work within a table. Do you have any idea how to achieve the same effect within a table?

Cheers,

Nick

iamPatrick · Apr 7, 2004

Ok, I signed up just to respond to this post. Up until now I've done about every other method possible for word wrapping and was getting thoroughly frustrated with my results. I came across this thread in a google search and was ecstatic, until I realized that this is another MS non-standard CSS property. Eh, ok, but I wouldn't rely on it.

The same effect with a table? Do you must mean a table cell. <TD style="word-wrap: break-word;"> will do the trick.

What really got me excited about the word wrap ability is that when used with a PRE tag I could post entries from a database and finally preserve all white space characters without doing server-side search and replaces and at the same time word wrap the PRE so it doesn't destroy the design. Talk about a run on sentence.

On that note here is a good article explaining that problem in greater depth:

http://voisen.org/archives/web_design/000382.php

Anyways, I've done a lot of searching and word-wrap: break-word seems to be the only HTML, no hidden text-area, solution to breaking up huge words that don't wrap otherwise. Damn non-standard standard...

nobeltlp · Oct 12, 2005

Im new a ASP and HTML but I just got this APS page to do
what I thnk you are trying to do.

There are two sections. Using textarea I created a set
width and a row limit, the formated var, str or Table cell
will wrap the width and row limit.
If not what you seek, sorry.
I've been at this a short time.
good luck anyway.

<code>
<TABLE CELLSPACING="4" CELLPADDING="4" border=2 style="WIDTH: 680px; HEIGHT: 78px"> 
<tr>
<td>Name1</td>
<td>Name2</td>
</tr>
<tr>
<td><textarea style="WIDTH: 183px; HEIGHT: 40px" id=text1 name=text1><%=FmtAlert%> </Textarea></td>
<td><textarea rows=5 style="WIDTH: 493px; HEIGHT: 50px" cols=49 id=text2 name=text2><%=FmtMemo%> </Textarea></td>
</TR>
</tr>
</TABLE> 
<table CELLSPACING="4" CELLPADDING="4" border=2 style="WIDTH: 715px; HEIGHT: 78px">
<tr>
<td>
<table>
</code>

mkrausnick · Oct 12, 2005

To make a table (and by extension, all the columns in the table) have a fixed width, use the "table-layout:fixed" style:

Code:

<table style="table-layout:fixed"  ...  >

Also, for this to work identically across browsers make sure you have a valid DOCTYPE.




Mike Krausnick
Dublin, California

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Force cell wrapping? 2

codeWarrior456

Technical User

dwarfthrower

Programmer

greedyzebra

Technical User

codeWarrior456

Technical User

codeWarrior456

Technical User

ChrisHunt

Programmer

Einstein47

Programmer

codeWarrior456

Technical User

nhoh

Technical User

iamPatrick

Programmer

nobeltlp

Programmer

mkrausnick

Programmer

Similar threads

Part and Inventory Search

Sponsor