How to implement a single line ellipse with CSS

Question

I want to be able to add three dots and keep the text on one 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 be shown in two lines, one small screen:

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

I want the text to display as follows:

 This is a very long text... 

text-overflow: ellipsis; It works if you set the width of the container, but you didn’t explicitly specify it in the flexible design and in my web application.

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.

Answer 1

In fact, you do not need to width "set" here. All elements in responsive design have a width. You can simply do this with the following rules:

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

Comment: This does not work with binding:

 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 .
• Using the <a> tag.

Updated with OP 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: it works!