how to make text follow in a new line and fit into a cell without widening it

[karen987]

I have a column in a table, which draws out info from a database. The column is 150px wide. I want it to remain this wide, even if one word is longer. What happens now is that if i put in a web address which is long, it makes the columner wider. I want to make it trunucate the url so that it ends after 150px has been reached and continues to the next line. If i have a word longer than 460px i will have the same problem.

Any solutions anyone? what do i need to add to make the code in the <a class....> fit into 150px and then continue to the next line if the word is longer?

Here is the relevant part of the code

<td width="150" valign="top">
 
<!-- Left Column -->
 
<a class="RelatedArticle" href="view.asp?ID=<%=trim(RS("ID"))%>"><%=trim(RS("fldTITLE"))%></a><br />                    
                                    </td>

does anyone know what i need to add to the code or the table? i'm not html literate, and i use dreameaver 8 for designing, i only know the very basics.

thanks in advance

[drhowarddrfine]

Currently, there is no standard way to do this. IE has a proprietary CSS method called 'word-wrap' which will become part of the CSS3 standard when it gets finalized, but it does not work in other browsers.

[karen987]

Currently, there is no standard way to do this. IE has a proprietary CSS method called 'word-wrap' which will become part of the CSS3 standard when it gets finalized, but it does not work in other browsers.

<td class="aTitle" valign="top">
<!-- Left Column -->
<a class="RelatedArticle" href="view.asp?ID=<%=trim(RS("ID"))%>"><%=trim(RS( "fldTITLE"))%></a><br /></td>

and on the css styles page i added

td.acolumn {
width: 150px;
overflow: hidden;
}


The actual data that needs trunucating is a url that is very long. it is drawn from the part of the code which contains the authors biodate and webaddress and email.
Here is more of the code in case it may be the problem, in not letting it work. the table 658 is split into 3 columns, the first column is 150px and the data comes after the "authors image" but before the "related article" links, which means it must be the part that begins "if DB to use =1"

<table width="658" align="center" cellpadding="2" cellspacing="0" border="0">
<tr>
 
<td class="aTitle" valign="top"> 
                    <!-- Left Column -->
 
 
<%IF NOT (NIMAGE = "" OR IsNUll(NIMAGE)) THEN%>            <img src="<%=NIMAGE%>" width="60" height="50" vspace="8" border="1"/> <br />
<hr align="center" width="100%" size="1" style="color: gray;"/>
<%END IF%>
<img src="images1/related2.JPG" width="140" height="36" alt="" border="0" /><br />
<br />
<%                        
 
IF DB_TO_USE = 1 OR DB_TO_USE = 3 THEN
 
SQL = "SELECT ID, fldTITLE FROM nm_tbl_news WHERE ((fldACTIVE = 1) AND (Now() BETWEEN fldPOSTED AND fldEXPIRES)) AND (ID IN (SELECT fldCID FROM nm_tbl_relations WHERE fldPID = " & NID & "))"
 
ELSE
 
SQL = "SELECT ID, fldTITLE FROM nm_tbl_news WHERE ((fldACTIVE = 1) AND (GetDate() BETWEEN fldPOSTED AND fldEXPIRES)) AND (ID IN (SELECT fldCID FROM nm_tbl_relations WHERE fldPID = " & NID & "))"
 
END IF            
Set RS = Server.CreateObject("ADODB.Recordset")
RS.LockType   = 1
RS.CursorType = 0
RS.Open SQL, MyConn    
WHILE NOT RS.EOF 
 
RCOUNT = RCOUNT + 1
%>
 
<img src="images1/blackbullet.JPG" width="5" height="5" alt="" border="0" /> <a class="RelatedArticle" href="view.asp?ID=<%=trim(RS("ID"))%>"><%=trim(RS("fldTITLE"))%></a><br />
<%                            RS.MoveNext
 
WEND
 
RS.Close 
 
Set RS = Nothing IF RCOUNT = 0 THEN%>There are no related articles.<% End If %>            
                        <br /><br />
 
 
<!-- [ Left Column ] -->        

[karen987]

i actually discovered the right code, that needs modifying, i didn't post it above, it was the wrong code.
Here is what i have at the present, and using your suggestionms, which doesn't chop the url, it still makes the table cell longer. Bear in mind the url that is pulled is like one very long word, it's a headache, what a silly problem

ive even tried adding the style from dreamweaver, to the "email" and "web address" part, but it still wouldn't chop the url and make it fit into 2 lines instead of extending the table cell.



<

td width="190" valign="top">
<!-- Left Column -->
 
 
<%IF NOT (BIO = "" OR IsNUll(BIO) OR IMAGE = "" OR IsNUll(IMAGE)) THEN%>                        
<div style="padding-right: 5px;padding-bottom: 5px;">
 
<img src="<%=IMAGE%>" width="60" height="50" vspace="4" border="1" align="left"/> 
<%=BIO%><br />
 
<%IF NOT (WEB = "" OR IsNull(WEB)) THEN%><br /><A class="aColumn" target="_blank" href="<%=WEB%>"><%=WEB%></A>
<%END IF%>                
<%IF NOT (EMAIL = "" OR IsNull(EMAIL)) THEN%><br />
 
<A class="aColumn" href="mailto:<%=EMAIL%>"><%=EMAIL%></A><%END IF%><hr align="center" width="100%" size="1" style="color: gray;"/>

and in my stylessheet i have added,

.aColumn { height: 20px; width: 150px; overflow: hidden; }

can anyone see what needs modifying? i need the very long url which is pulled out of the "web" asp code to fit into 2 lines, rather than extend the table cell like it's doing now

[karen987]

OK now i have some code, which chops the long url, to fit it into the 150px wide cell, as before it was making the cell wider. I used wordwrap.

It works, but what happens is that the url gets chopped, and the chopped bit, doesn't carry on in the next line. It works in the link though, but i'd like the whole link (url) to show, it can carry on the next line and line after if need be.

This is what im using, but on the page itself, the part which is [end/code] or something, shows on the webpage. I also note that the code works even if i don't add the vbscript part, so is it necessasry? Anyway this is the page code now

In the stylesheet:

[code language="VBScript"]
 
.aColumn { word-wrap: break-word; width: 150px; overflow: hidden; }

code on the webpage is:

<table width="760" align="center" cellpadding="2" cellspacing="0" border="0">
</p>
<tr>
<td width="155" valign="top">
<!-- Left Column -->
 
 
<%IF NOT (BIO = "" OR IsNUll(BIO) OR IMAGE = "" OR IsNUll(IMAGE)) THEN%> 
<div style="padding-right: 5px;padding-bottom: 5px;">
<img src="<%=IMAGE%>" width="60" height="50" vspace="4" border="1" align="left"/> 
<%=BIO%><br />
 
<%IF NOT (WEB = "" OR IsNull(WEB)) THEN%><br /><A class="aColumn" target="_blank" href="<%=WEB%>"><%=WEB%></A>
<%END IF%> 
<%IF NOT (EMAIL = "" OR IsNull(EMAIL)) THEN%><br /><A class="aColumn" href="mailto:<%=EMAIL%>"><%=EMAIL%></A><%END IF%>

[/code]

do i leave the cell table as it is? the only problem now is that the last bit ( [/code]) shows on the webpagge, and that the chopped url doesn't show on the next line. It fits though, the cell doesn't widen now.