CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
TDmoneybanks
TDmoneybanks

Reputation: 518

How to set text-overflow within bootstrap list-group

I am trying to set up a text-overflow property on links within a bootstrap list-group. There is also a bootstrap badge floated to the right of each list item within the group. When I try to set the text-overflow property, the link goes under the badge and is not truncated. here is the code im trying to set. forum-link is a class attached to each a tag:

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

here is the jsFiddle showing the code-http://jsfiddle.net/tdmoneybanks/c3hsa2y2/7/

Upvotes: 2

Views: 6475

Answers (5)

Jette
Jette

Reputation: 2609

Just to contribute an up-to-date answer for Bootstrap 4 where this is easily accomplished with col and col-auto:

<ul class="list-group">
  <li class="list-group-item">
    <div class="row">
      <div class="col text-truncate">
        This text could be very long and will be truncated if it doesn't fit
      </div>
      <div class="col-auto">(icon)</div>
      <div class="col-auto">(icon)</div>
    </div>
  </li>
</ul>

Upvotes: 0

Bhavin Shah
Bhavin Shah

Reputation: 2482

.text_info{
  display:inline-block;
  width:90%;
  max-width:91%;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}

Just add this css and give class to your <a> tag.

Here is JSFiddle

Hope this Helps.

Upvotes: 0

Ruben Lopez
Ruben Lopez

Reputation: 43

Add that to your code:

.list-group-item {
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
}

I've updated your fiddle: Fiddle

Upvotes: 1

Shaban Khan
Shaban Khan

Reputation: 156

Add display block and overflow hidden to anchor tag, this will help you if i get you. thanks

Upvotes: 0

TDmoneybanks
TDmoneybanks

Reputation: 518

I figured it out. Needed to wrap my text within a div inside of the a tag.

Upvotes: 1

Related Questions