how to avoid text overflow in twitter bootstrap?

Question

I\'m new to Twitter Bootstrap. I wrote following HTML:

   
   @Html.ActionLink(item.Name         


        
      

Answer 1

You are not using row-fluid in the correct place , thats why you are seeing the issue. Row-fluid creates a row inside which you can create columns using span classes , and since row-fluid uses percentage it will expand to fill all available horizontal space when on a large screen, and shrink columns to keep them from vertically stacking as the screen resizes.

So the basic principle is to use row-fluid this way :

   

     @Html.ActionLink(item.Name, "Details", new { id = item.Id }, new { @class = "JumpLinks", @style = "font-size:13px;font-weight:bold;" })
      
   

Thats why when you removed row-fluid and replaced it with span12 your issue was resolved . Also the best practice is to assign span with a class with property of width :100% , like :

.text-span{
         {
    width: 100%;
  }

Then use it in your code like :

  

      

         @Html.ActionLink(item.Name, "Details", new { id = item.Id }, new { @class = "JumpLinks", @style = "font-size:13px;font-weight:bold;" })
      
   

Avoid using span12 inside a span4 .