Overflow:hidden dots at the end

Question

Let's say I have a string "I like big butts and I cannot lie" and I cut it with overflow:hidden, so it displays something like this:

I like big butts and I cann

cutting off the text. Is it possible to display this like this:

I like big butts and I cann...

using CSS?

@CyrilGupta Sorry for the late response. I had to run to the bathroom. To answer your question... Yes — Joe Phillips
– Joe Phillips, Commented Apr 2, 2014 at 5:00
Possible duplicate of How can I show dots ("...") in a span with hidden overflow? — Termininja
– Termininja, Commented Nov 10, 2016 at 13:38
I don't think that's a duplicate, there are no butts involved in that one. — enobayram
– enobayram, Commented Dec 8, 2022 at 7:55

Dónal · Accepted Answer · 2021-01-21 23:55:30Z

552

You can use text-overflow: ellipsis; which according to caniuse is supported by all the major browsers.

Here's a demo on jsbin.

.cut-text { text-overflow: ellipsis; overflow: hidden; width: 160px; height: 1.2em; white-space: nowrap; }

<div class="cut-text"> I like big butts and I can not lie. </div>

edited Jan 21, 2021 at 23:55

Dónal

188k177 gold badges590 silver badges851 bronze badges

answered Jan 28, 2009 at 5:29

Joe Phillips

51.5k33 gold badges109 silver badges167 bronze badges

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

11 Comments

Jace Over a year ago

This seemed to work in Firefox 15.0.1: w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

Joe Phillips Over a year ago

Yes, it appears to work in newer versions. Obviously this answer is a few years old at this point.

Richard Ev Over a year ago

Firefox started to support this as of version 7, which was released in the latter half of 2011.

VoidKing Over a year ago

I can use my common sense to tell that this answer is "right" based on the votes and comments. However, I fail to see in reality how this answer is "right". I used both overflow: hidden; and text-overflow: ellipsis; in a  element (i.e., a block element) and found no ... at the end (of course I am making sure that it is indeed overflowing). I also tried this without the overflow: hidden; part, and also with a  element inside the  element where the  element had overflow: hidden; and the  had text-overflow: ellipsis; No matter how I try, this is a fail..

VoidKing Over a year ago

Well, I think I know the problem. I am trying to restrict the overflow based on max-height so I cannot have white-space: set to nowrap

|

Arjun · Accepted Answer · 2018-02-09 12:31:50Z

119

Check the following snippet for your problem

div{ width : 100px; overflow:hidden; display:inline-block; text-overflow: ellipsis; white-space: nowrap; }

<div> The Alsos Mission was an Allied unit formed to investigate Axis scientific developments, especially nuclear, chemical and biological weapons, as part of the Manhattan Project during World War II. Colonel Boris Pash, a former Manhattan P </div>

edited Feb 9, 2018 at 12:31

answered Mar 30, 2015 at 12:16

Arjun

2,2371 gold badge19 silver badges26 bronze badges

9 Comments

leo Over a year ago

up's for adding "white-space: nowrap;" which might be needed in some cases

MartianMartian Over a year ago

how to make the text to display 2 lines then disappear?

Arjun Over a year ago

@Matian2040 you can adjust by giving fixed height and overflow hidden styles, check this fiddle jsfiddle.net/5135L4bx

MartianMartian Over a year ago

oh i see. i tried. however it seems two lines means there won't be a ... at the end?

Chris Nalusaku Sep 5 at 18:58

Getting stuck here too. Have you figured out a solution?

Seth Over a year ago

display: inline-block; was the missing component for me. Thank you.

|

Nagendra Matala · Accepted Answer · 2018-05-28 06:14:33Z

48

Try this if you want to restrict the lines up to 3 and after three lines the dots will appear. If we want to increase the lines just change the -webkit-line-clamp value and give the width for div size.

div { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

edited May 28, 2018 at 6:14

answered May 28, 2018 at 6:10

Nagendra Matala

4914 silver badges4 bronze badges

3 Comments

cela Over a year ago

apologies, Im not sure how i removed your words like that!

Ken Bigler Over a year ago

works great on Chrome, but note that this will not work on Firefox

user3187724 Over a year ago

How do I do this on another browser, say Firefox? Edit: stackoverflow.com/questions/33058004/…

Vu Phan · Accepted Answer · 2019-01-15 12:25:19Z

Hopefully it's helpful for you:

.text-with-dots { display: block; max-width: 98%; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; }

<div class='text-with-dots'>Some texts here Some texts here Some texts here Some texts here Some texts here Some texts here </div>

coreuter · Accepted Answer · 2021-02-14 08:46:22Z

Hide text on load and show on hover

.hide-text { width: 70px; display: inline-block; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; } span:hover { white-space: unset; text-overflow: unset; }

<span class="hide-text"> How to hide text by dots and show text on hover</span>

ceejayoz · Accepted Answer · 2009-01-28 05:29:31Z

15

Yes, via the text-overflow property in CSS 3. Caveat: it is not universally supported yet in browsers.

answered Jan 28, 2009 at 5:29

ceejayoz

181k42 gold badges311 silver badges382 bronze badges

2 Comments

Simon E. Over a year ago

Browser support is pretty darn good now, as of Feb 2012. See caniuse.com/#search=text-overflow

Mr Lister Over a year ago

Ah, you're the reason this question showed up three years later.

Penny Liu · Accepted Answer · 2018-09-06 02:09:58Z

In bootstrap 4, you can add a .text-truncate class to truncate the text with an ellipsis.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <!-- Inline level --> <span class="d-inline-block text-truncate" style="max-width: 190px;"> I like big butts and I cannot lie </span>

manoj patel · Accepted Answer · 2020-04-20 04:12:25Z

<!DOCTYPE html> <html> <head> <style> .cardDetaileclips{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /* after 3 line show ... */ -webkit-box-orient: vertical; } </style> </head> <body> <div style="width:100px;"> <div class="cardDetaileclips"> My Name is Manoj and pleasure to help you. </div> </div> </body> </html>

Muhammad Taha · Accepted Answer · 2022-06-06 14:39:54Z

9

.cut-text { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

answered Jun 6, 2022 at 14:39

Muhammad Taha

4855 silver badges7 bronze badges

2 Comments

Zach Jensz Over a year ago

Add an explanation as to why your answer is better than the 10 others

Muhammad Taha Over a year ago

@ZachJensz Brother, Almost all other answers are also correct, but my focus is to first solve the problem and this is the code that does the actual job! no other styling, formatting, spacing.

radbyx · Accepted Answer · 2017-01-26 06:36:27Z

<style> .dots { display: inline-block; width: 325px; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; } .dot { display: inline-block; width: 185px; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; } </style>

Maju · Accepted Answer · 2016-01-15 12:06:06Z

Most of solutions use static width here. But it can be sometimes wrong for some reasons.

Example: I had table with many columns. Most of them are narrow (static width). But the main column should be as wide as possible (depends on screen size).

HTML:

<table style="width: 100%"> <tr> <td style="width: 60px;">narrow</td> <td> <span class="cutwrap" data-cutwrap="dynamic column can have really long text which can be wrapped on two rows, but we just need not wrapped texts using as much space as possible"> dynamic column can have really long text which can be wrapped on two rows but we just need not wrapped texts using as much space as possible </span> </td> </tr> </table>

CSS:

.cutwrap { position: relative; overflow: hidden; display: block; width: 100%; height: 18px; white-space: normal; color: transparent !important; } .cutwrap::selection { color: transparent !important; } .cutwrap:before { content: attr(data-cutwrap); position: absolute; left: 0; right: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333; } /* different styles for links */ a.cutwrap:before { text-decoration: underline; color: #05c; }

Collectives™ on Stack Overflow

Overflow:hidden dots at the end

11 Answers 11

11 Comments

9 Comments

3 Comments

Comments

Comments

2 Comments

Comments

Comments

2 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

11 Comments

9 Comments

3 Comments

Comments

Comments

2 Comments

Comments

Comments

2 Comments

Comments

1 Comment

Linked

Related