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 :

<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 .

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;

}

Answer 3

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

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

Answer 4

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