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?

Cyprinodont

i think reduce the size of that div or apply padding-right to it... also remove row-fluid it make no sense to apply it... – Titled

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

Titled

i have other span elements in parent div. So I can not use your suggestion. – Cyprinodont

main thing is that you have to provide the text-overflow container whether its a span or div with some width... may be in %... see the updates... – Titled

Why should it be applied directly to the span? I tried to apply it on the div, but that does not work. – Talbot

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;

}

Splash

Answer 3

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 :

<div class="row-fluid">
   <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>
      </span>
   </div>
</div>

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 :

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

Avoid using span12 inside a span4 .

Concrescence

Answer 4

Add word-wrap: break-word in your DIV. Write this:

.span4{
    width: 700px;
    word-wrap: break-word;
}

Edgy