How to implement single-line ellipsis with CSS

Question

I want to be able to add three dots and maintain a text in a single line in a responsive design.

So for example:

I have a link with a link inside a container element (e.g. <span>). If the text is long, it will shown in two lines one a small screen:

This is a very long text
and it wraps because it's very long

I want that text to be shown like this:

This is a very long text...

text-overflow: ellipsis; works if you have set a width to the container, but in responsive design and on my web app it's not specified obviously.

Here's the HTML:

<div class="itm-title">
  <a href="/friendly-url-sample/">This is a very long sentence and I don't want it to wrap, I want three dots</a>
</div>

Is there a solution in CSS or jQuery that can solve this? thanks.

Use min-width: 200px or media query to make fit the space you need. — Bipbip
– Bipbip, Commented Dec 15, 2015 at 16:16

Praveen Kumar Purushothaman · Accepted Answer · 2015-12-15 16:20:04Z

117

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="/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!

edited Dec 15, 2015 at 16:20

answered Dec 15, 2015 at 16:14

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

Liron Harel Over a year ago

I have a link <a>, I put the code on the link that wraps in a responsive design and I see a long line of text, all the text, without the ellipsis (tested in Chrome)

Praveen Kumar Purushothaman Over a year ago

@krillgar Anchor supports too. Only when the code is known, we can help in depth...

Liron Harel Over a year ago

I can't believe it, it worked, I mean accepting the answer :))

Liron Harel Over a year ago

@PraveenKumar the display:table on the upper-upper parent prevented it, now it works. Thanks so much Praveen (BTW, you are a great guy)

Kazuya Gosho Over a year ago

I have been looking for the trick long time.

|

Collectives™ on Stack Overflow

How to implement single-line ellipsis with CSS

1 Answer 1

16 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related