Thursday, March 31, 2011

Word Wrapping

I am currently working on creating a web page using .NET 2008. We are getting information from a database and when displaying it I cannot get it to wrap underneath. For example:

 2231 Question 1
 2232 Mechanical Engineering Technologists and Technicians 
 2233 Industrial Engineering and Manufacturing Technologists

and Technicians 2234 Question 4

In 2233 how can I get it to go underneath to look like this:

 2231 Question 1
 2232 Mechanical Engineering Technologists and Technicians 
 2233 Industrial Engineering and Manufacturing Technologists 
      and Technicians 
 2234 Question 4

Thank you!

From stackoverflow
  • Well, there's a better way, but this can be done cheaply and quickly with tables.

    <table>
    <tr><td>2231</td><td>Question 1</td></tr>
    <tr><td>2232</td><td>Mechanical Engineering Technologists and Technicians</td></tr> 
    <tr><td>2233</td><td>Industrial Engineering and Manufacturing Technologists and Technicians</td></tr> 
    <tr><td>2234</td><td>Question 4</td></tr>
    </table>
    

    Well, I tried to implement it in markdown, but it didn't like it.

  • I would structure your HTML in the following manner:

    <div class="qNumber">2231</div>
    <div class="qContent">Question 1</div>
    <div class="clear"></div>
    
    <div class="qNumber">2232</div>
    <div class="qContent">Mechanical Engineering Technologists and Technicians</div>
    <div class="clear"></div>
    
    <div class="qNumber">2233</div>
    <div class="qContent">Industrial Engineering and Manufacturing Technologists and Technicians </div>
    <div class="clear"></div>
    
    <div class="qNumber">2234</div>
    <div class="qContent">Question 4</div>
    <div class="clear"></div>
    

    And your CSS would be the following:

    .qNumber { float: left; width: 40px; }
    .qContent { width: 350px; padding-left: 40px; }
    .clear { clear: both; }
    

    Obviously tweak the number to your liking :)

    Adam Davis : +1: This is the better way I was alluding to in my answer. CSS FTW!

0 comments:

Post a Comment