CSS text-overflow: ellipsis; not working?

Question

I don't know why this simple CSS isn't working...

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

Should cut off around the 4th "Test"

related http://stackoverflow.com/questions/802175/truncating-long-strings-with-css-feasible-yet — Adriano, Jun 13 '14 at 07:56
related: [Applying Ellipsis to Multiline Text](http://stackoverflow.com/q/33058004/3597276) — Michael Benjamin, Oct 24 '15 at 13:19

score 1447 · Accepted Answer · edited Jan 23 '20 at 11:12

1447

text-overflow:ellipsis; only works when the following are true:

The element's width must be constrained in px (pixels). Width in % (percentage) won't work.
The element must have overflow:hidden and white-space:nowrap set.

The reason you're having problems here is because the width of your a element isn't constrained. You do have a width setting, but because the element is set to display:inline (i.e. the default) it is ignoring it, and nothing else is constraining its width either.

You can fix this by doing one of the following:

Set the element to display:inline-block or display:block (probably the former, but depends on your layout needs).
Set one of its container elements to display:block and give that element a fixed width or max-width.
Set the element to float:left or float:right (probably the former, but again, either should have the same effect as far as the ellipsis is concerned).

I'd suggest display:inline-block, since this will have the minimum collateral impact on your layout; it works very much like the display:inline that it's using currently as far as the layout is concerned, but feel free to experiment with the other points as well; I've tried to give as much info as possible to help you understand how these things interact together; a large part of understanding CSS is about understanding how various styles work together.

Here's a snippet with your code, with a display:inline-block added, to show how close you were.

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

Useful references:

edited Jan 23 '20 at 11:12

NoDataDumpNoContribution

10,591
9
64
104

answered Jul 22 '13 at 08:46

Spudley

166,037
39
233
307

57

What if I can't use set width due to responsive design? – SearchForKnowledge Oct 13 '14 at 16:39
9

Note that max-width also works. This helped me because I had an icon that had to hug the end of text regardless of its span's width. (Otherwise the icon would be floating out to the right if the text did not take up the span's full width) – Kevin Oct 16 '14 at 19:43
For responsive behaviour simply change inline-block to block, e.g. [jsfiddle](http://jsfiddle.net/rsmuydj3/) – Reggie Pinkham May 13 '15 at 00:21
2

`white-space: nowrap`... that was it for me. – Eduard Luca May 21 '15 at 11:24
1

Ran into this whilst trying to contain the spill in table cells. A minor correction - the width needs to be constrained by `em` works just as well as `px`. However, `overflow:hidden` must be specified. – DroidOS May 28 '15 at 13:57
8

Note: `white-space: nowrap` is actually not necessary. We can still see the ellipses even without it. For multiple lines `text-overflow`, see [this SO](http://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines) – gfaceless Jul 09 '15 at 10:38
40

Not sure whether this is a recent change or not, but in Chrome 50 (beta) you don't have to set width to a px value -- "100%" also works. `white-space: nowrap` is required though. – thdoan Mar 14 '16 at 07:57
31

You **do not** need to set a fixed `width` at all. All you need to do is set a `white-space: nowrap;` and it works just fine. – adamj Nov 03 '16 at 01:42
@adamj I used `width:100%` but required `position:static` as well (`absolute` did not work, I didn't try too many others) – Charles L. Dec 14 '16 at 19:36
Don't need to set a width. Works on chrome without it. Just needs to be a block element and static/relative positioning. – Abdul Sadik Yalcin Nov 03 '17 at 10:04
2

To overcome the percentage limitation, you can wrap it in `calc()` as in : `width: calc(90%)` (tested on chrome 63 and IE11) – Denis Chevalier Jan 04 '18 at 16:07
1

`calc()` wasn't an option when the question was asked. But yes, it does indeed solve a lot of problems like this. – Spudley Jan 07 '18 at 20:21
1

For me, adding the following css to my div, did the trick: `display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;` – Daniel Hair Feb 01 '18 at 17:59
Like other people have mentioned here in the comments, explicitly set percentage widths are now working but I'm unsure of the browser support, when in doubt, just assume it's broken for IE 10 and below. – brandito Mar 16 '18 at 03:54
1

display:flex also doesn't appear to support text-overflow:ellipsis. Changing to display:block shows the ellipsis. – vaughnkoch Oct 02 '18 at 18:43
It didn’t work for me because it was `display: flex`, I set `display: block` and everything was fine. – Alexandr Kazakov Dec 31 '18 at 13:37
2

@AlexandrKazakov - yep, bear in mind that this answer was written before `display:flex` was a thing. :-) – Spudley Jan 01 '19 at 21:16
2

I don't know if there was an update from the time you wrote this answer to the present date. But, it does work with `%` on width. Only thing I had to make sure was about `overflow: hidden; white-space:nowrap`. – Krushi Raj Sep 08 '19 at 18:06
the part about the width isn't true – Ben Apr 16 '20 at 13:55
1

@SearchForKnowledge you can set max-width as 0 for responsive one. reference here - https://css-tricks.com/tale-width-max-width/ – Mohan Ram Sep 25 '20 at 13:20
2

I also found using `display: flex` defeats `text-overflow: ellipsis` setting. – bob May 05 '21 at 00:11
In some cases, you only need to add `overflow: hidden` to the **container** element. – kuzey beytar May 14 '21 at 09:57
1

If you can't specify the width in pixels as @Spudley says, you can still achieve the three dots by specifying min-width in pixels as well. Nice flex example: https://css-tricks.com/flexbox-truncated-text/ – Štěpán Jul 14 '21 at 08:50
1

You **may** set the width in percent, but with **extra cautions**. An example for this condition is that if the inner div's width is set to 100%, but its parent has max-width 100px. – Hzzkygcs Oct 25 '21 at 20:11
Note: - The bootstrap example of the *text-truncate* class has been used on the *col* class which uses width in "%". Also *white-space: nowrap* is not every time necessary but yes sometimes. – Vivek S Jun 27 '22 at 10:49
Just wanted to say[,](https://semicolon.dev/tutorial/css/text-overflow-ellipsis-doesnt-work) these comments are great I learned so much about `text-overflow: ellipsis` from just this. – InfiniteStack Aug 17 '22 at 15:00
This answer got some wrong detail... You don't actually need to declaire a fixed px for width at all! I tested myself with no fixed width in flexbox, and it also works fine – yuan Aug 23 '22 at 07:53
Thanks, I used display: inline-block in a span with your answer. – Igor Chaves May 18 '23 at 15:29
I got it working without setting a set width in pixels. The outisde container has width in % and it constrains my text. – Franco Jul 09 '23 at 10:57

Supreme Dolphin · Answer 2 · 2021-03-24T20:46:18.060

154

The accepted answer is awesome. However, you can still use % width and attain text-overflow: ellipsis. The solution is simple:

display: inline-block; /* for inline elements e.g. span, strong, em etc */
text-overflow: ellipsis;
width: calc(80%); /* The trick is here! */

It seems whenever you use calc, the final value is rendered in absolute pixels, which consequentially converts 80% to something like 800px for a 1000px-width container. Therefore, instead of using width: [YOUR PERCENT]%, use width: calc([YOUR PERCENT]%).

edited Mar 24 '21 at 20:46

answered Oct 24 '18 at 20:15

Supreme Dolphin

2,248
1
14
23

8

Awesome, just adding that `overflow: hidden;` is also needed – Omar Omeiri Oct 06 '22 at 20:37
This does not seem to be true in my case, I've got `width: calc(100% - 20px);` but no overflow is created. – Blye Nov 26 '22 at 15:26
Dynamic width, eg: `100%`, is possible. Also, please don't forget to add width in the parent component before applying this solution. – Zekarias Taye Hirpo Feb 20 '23 at 07:40

score 89 · Answer 3 · answered Dec 14 '18 at 17:40

89

So if you reach this question because you're having trouble trying to get the ellipsis working inside a display: flex container, try adding min-width: 0 to the outmost container that's overflowing its parent even though you already set a overflow: hidden to it and see how that works for you.

More details and a working example on this codepen by aj-foster. Totally did the trick in my case.

answered Dec 14 '18 at 17:40

Herick

1,687
1
14
19

5

Great solution - it's also the only one posted here that works for a `position: sticky` element within a `display: flex` container. – James Dinsdale Jan 31 '19 at 13:49
3

I had this problem on Firefox, Chrome was Ok. I had `display` set to `grid` on `body`. To fix this I had to set `min-length: 0;` on grid items (in my case children of body) – Miad Abdi Nov 13 '20 at 19:15
1

For an in depth explanation on "why this is necessary" I suggest to read [the following answer on another question](https://stackoverflow.com/a/36247448/1697459) – Wilt Apr 12 '22 at 13:40
2

The most important thing is in the answer: `the outmost container that's overflowing`. I had to add `min-width:0` to the top 2 containers on different levels. I spent 6 hours to realize it. – Adrug Nov 06 '22 at 15:40
The explanation to this answer: https://stackoverflow.com/a/66689926/9157799 – M Imam Pratama Feb 05 '23 at 03:11
Note to self: Consider `overflow-wrap: break-word;` instead of ellipsis. – M Imam Pratama Feb 05 '23 at 03:22
This is the best solution. Actually, one better, adding `flex-basis:0` to your element that needs the overflow ellipsis. This will make the element take up as much width as it needs, but not if it means overflowing the flex container – BlobKat Mar 10 '23 at 18:41
For me what worked was to make sure to place the `overflow:hidden;text-overflow: ellipsis;white-space:nowrap` directly on the flex child that I want to elipsis, instead of targetting the flex container. – Max Apr 22 '23 at 15:23

score 35 · Answer 4 · edited Sep 23 '21 at 17:48

35

I have been having this problem and I wanted a solution that could easily work with dynamic widths. The solution use css grid. This is how the code looks like:

.parent {
  display: grid;
  grid-template-columns: auto 1fr;
}

.dynamic-width-child {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.fixed-width-child {
  white-space: nowrap;
}

<div class="parent">
  <div class="dynamic-width-child">
    iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii asdfhlhlafh;lshd;flhsd;lhfaaaaaaaaaaaaaaaaaaaa
  </div>
  <div class="fixed-width-child">Why?-Zed</div>
</div>

edited Sep 23 '21 at 17:48

Mr. Polywhirl

42,981
12
84
132

answered Feb 23 '21 at 08:53

YulePale

6,688
16
46
95

I found that, if you have a hierarchy of children, you need to set the `dynamic-with-child` on all of them – Marcel Oct 26 '22 at 21:35
`grid-template-columns` might need to be replaced with `grid-template-rows` based on requirement. Save that one change, this is the only answer that worked without any hitches or weird workarounds. – ruth Nov 11 '22 at 12:21

score 14 · Answer 5 · answered Apr 30 '20 at 03:47

I faced the same issue and it seems like none of the solution above works for Safari. For non-safari browser, this works just fine:

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

For Safari, this is the one that works for me. Note that the media query to check if the browser is Safari might change over time, so just tinker with the media query if it doesn't work for you. With line-clamp property, it would also be possible to have multiple lines in the web with ellipsis, see here.

// Media-query for Safari-only browser.
@media not all and (min-resolution: 0.001dpcm) {
  @media {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    white-space: normal;
  }
}

`display: block` did the trick for me (using Chrome), `` tags are by default inline. — run_the_race, Apr 22 '23 at 05:53

score 13 · Answer 6 · edited Jul 12 '19 at 22:00

13

Include the four lines written after the info for ellipsis to work

.app a
{
 color: #fff;
 font: bold 15px/18px Arial;
 height: 18px;
 margin: 0 5px 0 5px;
 padding: 0;
 position: relative;
 text-align: center;
 text-decoration: none;
 width: 140px;

 /* 
 Note: The Below 4 Lines are necessary for ellipsis to work.
 */

 display: block;/* Change it as per your requirement. */
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

edited Jul 12 '19 at 22:00

John

1
13
98
177

answered Oct 06 '17 at 12:27

Manoj Selvin

2,247
24
20

For a table cell the `display: block;` will break it so you need to use `max-width: 100px;`. Note that `width` will *not* work. No idea why not. – AJP Aug 20 '20 at 09:54

score 9 · Answer 7 · answered Jul 22 '13 at 03:16

9

Add display: block; or display: inline-block; to your #User_Apps_Content .DLD_App a

demo

answered Jul 22 '13 at 03:16

Bhojendra Rauniyar

83,432
35
168
231

I just checked and it is cutting off :/ – SearchForKnowledge Oct 13 '14 at 15:34

score 8 · Answer 8 · edited Oct 18 '21 at 02:45

8

Just add in the div containing that paragraph

white-space: nowrap 
width: 50px; 
overflow: hidden;
text-overflow: ellipsis; 
border: 1px solid #000000;

edited Oct 18 '21 at 02:45

Jeremy Caney

7,102
69
48
77

answered Jul 14 '21 at 18:08

Atul Tiwaree

151
2
3

score 7 · Answer 9 · answered Jan 06 '15 at 10:22

Also make sure word-wrap is set to normal for IE10 and below.

The standards referenced below define this property's behavior as being dependent on the setting of the "text-wrap" property. However, wordWrap settings are always effective in Windows Internet Explorer because Internet Explorer does not support the "text-wrap" property.

Hence in my case, word-wrap was set to break-word (inherited or by default?) causing text-overflow to work in FF and Chrome, but not in IE.

ms info on word-wrap property

score 6 · Answer 10 · edited Oct 20 '15 at 06:58

6

anchor,span... tags are inline elements by default, In case of inline elements width property doesn't works. So you have to convert your element to either inline-block or block level elements

edited Oct 20 '15 at 06:58

Tushar Gupta

15,504
1
29
47

answered Oct 20 '15 at 06:43

santhoshkumar

61
1
2

score 3 · Answer 11 · answered Sep 06 '18 at 02:23

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: 250px;">
  The quick brown fox jumps over the lazy dog.
</span>

score 2 · Answer 12 · answered May 29 '19 at 23:44

2

MUST contain

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

MUST NOT contain

display: inline

SHOULD contain

position: sticky

answered May 29 '19 at 23:44

NVRM

11,480
1
88
87

score 2 · Answer 13 · answered Aug 16 '22 at 19:50

For me I wasn't setting it inside the inner div I was setting it in outer div so even though I had nowrap, overflow:hidden, and a set width it wasn't working. The code looked like:

<div className="outer">
  <ToolTip>
    <div className="inner"> long content needing to be cut
    </div>
  </ToolTip>
</div>

score 1 · Answer 14 · answered Oct 18 '16 at 07:59

1

You just add one line css:

.app a {
   display: inline-block;
}

answered Oct 18 '16 at 07:59

Sanjib Debnath

3,556
2
22
16

score 1 · Answer 15 · answered Aug 17 '21 at 09:23

1

Please also ensure, that the immediate enclosing element has a fixed width, and the span where you want to apply ellipsis , has a display:block

answered Aug 17 '21 at 09:23

Bidisha Das

252
2
14

score 0 · Answer 16 · answered Dec 04 '18 at 05:24

I had to make some long descriptions ellipse(take only one lane) while being responsive, so my solution was to let the text wrap(instead of white-space: nowrap) and instead of fixed width I added fixed height:

span {
  display: inline-block;
  line-height: 1rem;
  height: 1rem;
  overflow: hidden;
  // OPTIONAL LINES
  width: 75%;
  background: green;
  //  white-space: normal; default
}

<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quia quod reprehenderit saepe sit. Animi deleniti distinctio dolorum iste molestias reiciendis saepe. Ea eius ex, ipsam iusto laudantium natus obcaecati quas rem repellat temporibus! A alias at, atque deserunt dignissimos dolor earum, eligendi eveniet exercitationem natus non, odit sint sit tempore voluptate. Commodi culpa ex facere id minima nihil nulla omnis praesentium quasi quia quibusdam recusandae repellat sequi ullam, voluptates. Aliquam commodi debitis delectus magnam nulla, omnis sequi sint unde voluptas voluptatum. Adipisci aliquam deserunt dolor enim facilis libero, maxime molestias, nemo neque non nostrum placeat reprehenderit, rerum ullam vel? A atque autem consectetur cum, doloremque doloribus fugiat hic id iste nemo nesciunt officia quaerat quibusdam quidem quisquam similique sit tempora vel. Accusamus aspernatur at au
</span>

score -2 · Answer 17 · edited Feb 07 '20 at 06:29

-2

Write these in your css rule.

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

edited Feb 07 '20 at 06:29

Manoj Selvin

2,247
24
20

answered Jun 11 '18 at 21:04

Siraj Alam

9,217
9
53
65

You can also look through this, https://jsfiddle.net/ManiAnand/5v6pfy9w/ – Mani Abi Anand Nov 14 '18 at 10:58
If width can be specified doesn't make my answer wrong. All you just added display block in my answer, I have written a snippet, not the whole codes, so other things can be added but have nothing to do with the problem!! Can you please specify how my answer is not correct? – Siraj Alam Nov 14 '18 at 11:11
1

The width needs to be specified as well as the display. If width a percentage or unspecified and not set to hard units, overflow will not be constrained and it won't work. See the accepted answer. – jlesse Dec 13 '18 at 20:34
Width has already been set by the op. I gave snippet to add in his codes – Siraj Alam Dec 13 '18 at 20:35

score -7 · Answer 18 · edited Oct 18 '21 at 02:45

-7

You can also add float:left; inside this selector:

#User_Apps_Content .DLD_App a

edited Oct 18 '21 at 02:45

Jeremy Caney

7,102
69
48
77

answered Jul 22 '13 at 07:41

Shabbir Lakdawala

75
6

CSS text-overflow: ellipsis; not working?

18 Answers18

Linked

Related