how to avoid text overflow in twitter bootstrap?

Question

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

<div class="span4">    <span class="row-fluid hideOverflow">    @Html.ActionLink(item.Name, "Details", new { id = item.Id }, new { @class = "JumpLinks", @style = "font-size:13px;font-weight:bold;" })    </span> </div> 

The CSS for the hideOverflow class is:

.hideOverflow {     overflow:hidden;     white-space:nowrap;     text-overflow:ellipsis; } 

But it is showing me result as:

Then I changed 'row-fluid' to span12 and then it is showing the following result:

Why is my hideOverFlow class not working with the row-fluid class?

What do I need to change in order to get the same result as the row-fluid class?

Answer 1

make the html structure like this...

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

The CSS:-

.hideOverflow {     overflow:hidden;     white-space:nowrap;     text-overflow:ellipsis;     width:100%;     display:block; } 

Answer 2

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:

<div class="row-fluid">         <div class="span12">         <div id="standard-placeholder" style="display: none;">             @Html.Label(Localization.Title)             <span class="label label-warning standard-description"></span>         </div>     </div> </div> 

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;  }