How to implement single-line ellipsis with CSS

by

You actually don’t need width to be “set” here. All the elements in the responsive design have their width. You can just do it around with the following rules:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Comment: This doesn’t work with anchor:

a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<a href="#">Pages you view in incognito tabs won’t stick around in your browser’s history, cookie store, or search history after you’ve closed all of your incognito tabs. Any files you download or bookmarks you create will be kept. Learn more about incognito browsing.</a>

It works! :)

  • No width set.
  • Using <a> tag.

Updated with OP’s Code

.itm-title {
  width: 150px;
}
a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="itm-title">
  <a href="https://stackoverflow.com/friendly-url-sample/">This is a very long sentence and I don't want it to wrap, I want three dots</a>
</div>

Result: Works!

Leave a Comment