CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
richard
richard

Reputation: 762

How to correctly use text overflow in bootstrap

I'm trying to hide the overflow text of li and my li looks like this 

<li class="food_item">
   <a href="#" class="food_name" title="test">
       testtesttesttesttesttesttesttesttest
   </a>
   <span>(12)</span>
</li>
<li class="food_item">
   <a href="#" class = "food_name">a short one</a>
   <span>(12)</span>
</li>

and my css 

.food_category>.food_item {
  width: 25%;
  float: left;
  line-height: 30px;
}
.food_category .food_name {
  font-size: 14px;
  margin: 0px 4px 0px 0px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  width: 80%;
  display: inline-block;
}

food_category is the class name of the ul tag, now the effect is below:enter image description here

the span and the a tag are not in the same line, I assume it's about the inline-block property of the a, but if I remove that, the text-overflow will not work and the overflow text will not be hidden. I'm stuck here, can anybody help me? how can I make the a and span show in the same line while keeping overflow text hidden?

Update
this is the jsfiddle link, btw,I didn't set the css of span. What I want is to make the span text right behind the a tag like this testest... (12).Thx!

Upvotes: 0

Views: 180

Answers (2)

War10ck
War10ck

Reputation: 12508

In regards to your update, you need to set the anchor tag and span tag to be vertically aligned at the top of the list element. Add the following to your CSS:

.food_item a,
.food_item span {
    vertical-align: top;    
}

This produces the desired behavior.

DEMO

Upvotes: 2

feitla
feitla

Reputation: 1334

You can do something like:

.food_item span {
    display: inline-block;
    float:left;
}

and add float:left; to .food_item .food_name

.food_item .food_name {
  font-size: 14px;
  margin: 0px 4px 0px 0px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  width: 60%;
  display: inline-block;
  float:left;
}

FIDDLE

You may need to update the margin/padding for the spacing of the span.

I would also recommend adding something like clearfix on each li element to prevent float issues:

<li class="food_item clearfix">
   ...
</li>
<li class="food_item clearfix">
   ...
</li>

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

Upvotes: 1

Related Questions