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

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • karen987
    New Member
    • Mar 2007
    • 114

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

    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

    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
    Recognized Expert Expert
    • Sep 2006
    • 7434

    #2
    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.

    Comment

    • karen987
      New Member
      • Mar 2007
      • 114

      #3
      Originally posted by 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.

      <td class="aTitle" valign="top">
      <!-- Left Column -->
      <a class="RelatedA rticle" href="view.asp? ID=<%=trim(RS(" ID"))%>"><%=tri m(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"



      Code:
      <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 ] -->

      Comment

      • karen987
        New Member
        • Mar 2007
        • 114

        #4
        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.



        <
        Code:
        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,

        Code:
        .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

        Comment

        • karen987
          New Member
          • Mar 2007
          • 114

          #5
          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:
          [code language="VBScript"]
          
          .aColumn { word-wrap: break-word; width: 150px; overflow: hidden; }
          code on the webpage is:

          Code:
          <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.

          Comment

          Working...