Css text overflow ellipsis not working

Question

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/

Apply it to the .item and disallow line breaks: jsfiddle.net/m6krvapf/4 — CunningFatalist, Commented Jan 26, 2015 at 16:31

dippas · Accepted Answer · 2015-01-26 19:14:02Z

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-block`to `.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>

Plaudit Design · Accepted Answer · 2015-01-26 16:39:41Z

1

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>

answered Jan 26, 2015 at 16:39

Plaudit Design

1,1568 silver badges16 bronze badges

Also here is a article on it that may help: css-tricks.com/snippets/css/truncate-string-with-ellipsis
– Plaudit Design
Commented Jan 26, 2015 at 16:41

Add a comment |

Collectives™ on Stack Overflow

Css text overflow ellipsis not working

2 Answers 2

so here is a snippet below

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

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

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

so here is a snippet below

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

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)

Linked

Related

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

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