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

Of course the question title is broad... it'll depend on Bootstrap's structure you're working with since it may have CSS rules which can interfere with your code.

In my situation I have a structure with row-fluid, span#s and label CSS classes like this:

    
    

        

            @Html.Label(Localization.Title)
            
        
    

Taking advantage of the code provided by SaurabhLP I used this shorten CSS version which did it for me:

.standard-description {
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: block;
}

It correctly places an ellipsis in the text inside the span when the title is very long.

As a plus: if you want to make the text break line, then you can try this CSS instead:

.standard-description {

    white-space:pre-line;

}