CODEWITHSUNDEEP
htmlcss
Jimmy
Jimmy

Reputation: 12517

Css text overflow ellipsis not working

This is my code:

<ul class="results">
   <li class="item"> <span class="title"><a href="item.html" target="_blank">The numbers in the table specify the first browser version that fully supports the property</a></span><span class="place">Place</span>
   </li>
   <li class="item"> <span class="title"><a href="item.html" target="_blank">The numbers in the table specify the first browser version that fully supports the property</a></span><span class="place">Place</span>
   </li>
</ul>

I am using the css:

.results  {text-overflow: ellipsis;}

However it doesn't seem to work on the content I have, and just overflows as normal. Can anyone tell me where I am going wrong please?

http://jsfiddle.net/m6krvapf/3/

Upvotes: 1

Views: 2205

Answers (2)

dippas
dippas

Reputation: 60573

You must apply text-overflow:ellipsis to .item , plus text-overflow:ellipsis can't be applied alone.

This property only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box, for example). Text can overflow when it is prevented from wrapping (e.g., due to ‘white-space:nowrap’) or a single word being too long to fit.

This CSS property doesn't force an overflow to occur; to do so and make text-overflow to be applied, the author must apply some additional properties on the element, like setting overflow to hidden.

More info

so here is a snippet below

.item {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}
<ul class="results">
  <li class="item">
    <span class="title">
      <a href="item.html" target="_blank">The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property </a>
    </span>
    <span class="place">Place</span>
  </li>
  <li class="item">
    <span class="title">
      <a href="item.html" target="_blank">The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property</a>
    </span>
    <span class="place">Place</span>
  </li>
</ul>

If needed you may add width to your .item like this below

.item {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 150px
}
<ul class="results">
  <li class="item">
    <span class="title">
      <a href="item.html" target="_blank">The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property </a>
    </span>
    <span class="place">Place</span>
  </li>
  <li class="item">
    <span class="title">
      <a href="item.html" target="_blank">The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property</a>
    </span>
    <span class="place">Place</span>
  </li>
</ul>

I'm guessing you want your class .place to always show therefore you need to add display:inline-blockto .title ( because span has a initial value of inline)

.title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  width: 150px
}
<ul class="results">
  <li class="item">
    <span class="title">
      <a href="item.html" target="_blank">The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property </a>
    </span>
    <span class="place">Place</span>
  </li>
  <li class="item">
    <span class="title">
      <a href="item.html" target="_blank">The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property The numbers in the table specify the first browser version that fully supports the property</a>
    </span>
    <span class="place">Place</span>
  </li>
</ul>

Upvotes: 4

Plaudit Design
Plaudit Design

Reputation: 1156

Here is the code.

.results .item  {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
<ul class="results">
   <li class="item"> <span class="title"><a href="item.html" target="_blank">The numbers in the table specify the first browser version that fully supports the property</a></span><span class="place">Place</span>
   </li>
   <li class="item"> <span class="title"><a href="item.html" target="_blank">The numbers in the table specify the first browser version that fully supports the property</a></span><span class="place">Place</span>
   </li>
</ul>

Upvotes: 1

Related Questions