471,605 Members | 1,382 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,605 software developers and data experts.

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

114 100+
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

Expand|Select|Wrap|Line Numbers
  1. <td width="150" valign="top">
  2.  
  3. <!-- Left Column -->
  4.  
  5. <a class="RelatedArticle" href="view.asp?ID=<%=trim(RS("ID"))%>"><%=trim(RS("fldTITLE"))%></a><br />                    
  6.                                     </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
Nov 9 '07 #1
4 4447
drhowarddrfine
7,435 Expert 4TB
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.
Nov 9 '07 #2
karen987
114 100+
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"



Expand|Select|Wrap|Line Numbers
  1. <table width="658" align="center" cellpadding="2" cellspacing="0" border="0">
  2. <tr>
  3.  
  4. <td class="aTitle" valign="top"> 
  5.                     <!-- Left Column -->
  6.  
  7.  
  8. <%IF NOT (NIMAGE = "" OR IsNUll(NIMAGE)) THEN%>            <img src="<%=NIMAGE%>" width="60" height="50" vspace="8" border="1"/> <br />
  9. <hr align="center" width="100%" size="1" style="color: gray;"/>
  10. <%END IF%>
  11. <img src="images1/related2.JPG" width="140" height="36" alt="" border="0" /><br />
  12. <br />
  13. <%                        
  14.  
  15. IF DB_TO_USE = 1 OR DB_TO_USE = 3 THEN
  16.  
  17. 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 & "))"
  18.  
  19. ELSE
  20.  
  21. 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 & "))"
  22.  
  23. END IF            
  24. Set RS = Server.CreateObject("ADODB.Recordset")
  25. RS.LockType   = 1
  26. RS.CursorType = 0
  27. RS.Open SQL, MyConn    
  28. WHILE NOT RS.EOF 
  29.  
  30. RCOUNT = RCOUNT + 1
  31. %>
  32.  
  33. <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 />
  34. <%                            RS.MoveNext
  35.  
  36. WEND
  37.  
  38. RS.Close 
  39.  
  40. Set RS = Nothing IF RCOUNT = 0 THEN%>There are no related articles.<% End If %>            
  41.                         <br /><br />
  42.  
  43.  
  44. <!-- [ Left Column ] -->        
Nov 9 '07 #3
karen987
114 100+
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.



<
Expand|Select|Wrap|Line Numbers
  1. td width="190" valign="top">
  2. <!-- Left Column -->
  3.  
  4.  
  5. <%IF NOT (BIO = "" OR IsNUll(BIO) OR IMAGE = "" OR IsNUll(IMAGE)) THEN%>                        
  6. <div style="padding-right: 5px;padding-bottom: 5px;">
  7.  
  8. <img src="<%=IMAGE%>" width="60" height="50" vspace="4" border="1" align="left"/> 
  9. <%=BIO%><br />
  10.  
  11. <%IF NOT (WEB = "" OR IsNull(WEB)) THEN%><br /><A class="aColumn" target="_blank" href="<%=WEB%>"><%=WEB%></A>
  12. <%END IF%>                
  13. <%IF NOT (EMAIL = "" OR IsNull(EMAIL)) THEN%><br />
  14.  
  15. <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,

Expand|Select|Wrap|Line Numbers
  1. .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
Nov 9 '07 #4
karen987
114 100+
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:

Expand|Select|Wrap|Line Numbers
  1. [code language="VBScript"]
  2.  
  3. .aColumn { word-wrap: break-word; width: 150px; overflow: hidden; }
code on the webpage is:

Expand|Select|Wrap|Line Numbers
  1. <table width="760" align="center" cellpadding="2" cellspacing="0" border="0">
  2. </p>
  3. <tr>
  4. <td width="155" valign="top">
  5. <!-- Left Column -->
  6.  
  7.  
  8. <%IF NOT (BIO = "" OR IsNUll(BIO) OR IMAGE = "" OR IsNUll(IMAGE)) THEN%> 
  9. <div style="padding-right: 5px;padding-bottom: 5px;">
  10. <img src="<%=IMAGE%>" width="60" height="50" vspace="4" border="1" align="left"/> 
  11. <%=BIO%><br />
  12.  
  13. <%IF NOT (WEB = "" OR IsNull(WEB)) THEN%><br /><A class="aColumn" target="_blank" href="<%=WEB%>"><%=WEB%></A>
  14. <%END IF%> 
  15. <%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.
Nov 10 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.