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 — Adrien Be, 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
`FF only` - if `filter` is applied, ellipsis will not be rendered. [bug opened](https://bugzilla.mozilla.org/show_bug.cgi?id=1365528) — vsync, May 17 '17 at 09:08

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

1095

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

Trilarion

9,318
9
55
91

answered Jul 22 '13 at 08:46

Spudley

157,081
38
222
293

26

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

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
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
6

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
33

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
18

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
1

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
`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
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
@AlexandrKazakov - yep, bear in mind that this answer was written before `display:flex` was a thing. :-) – Spudley Jan 01 '19 at 21:16
1

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
text-overflow:ellipsis; – xgqfrms Dec 19 '19 at 12:22
the part about the width isn't true – Ben Apr 16 '20 at 13:55
@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
1

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. – beytarovski May 14 '21 at 09:57

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

71

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

1,340
12
18

Would it work with calc(100%) ? – BrianK Jan 05 '21 at 00:13
There is no reason for it not to work. – Supreme Dolphin Jan 07 '21 at 08:07

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

41

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,126
1
11
19

2

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
2

I think it shoud be included in the selected answer. It solved my issue. Thanks! – j0nd0n7 Dec 12 '19 at 22:01
2

You, sir, are a genius. – Nathan Osman Jun 03 '20 at 05:02
1

I was using raw text within a flex box and wrapping it in an element with this tip worked! – electrovir Jul 10 '20 at 20:11
1

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

score 9 · Answer 4 · edited Jul 12 '19 at 22:00

9

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

10,154
9
79
143

answered Oct 06 '17 at 12:27

Manoj Selvin

1,422
16
15

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 7 · Answer 5 · 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 5 · Answer 6 · edited Oct 20 '15 at 06:58

5

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

11,306
1
21
41

answered Oct 20 '15 at 06:43

santhoshkumar

51
1
2

score 4 · Answer 7 · 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;
  }
}

score 2 · Answer 8 · answered Jul 22 '13 at 03:16

2

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

73,156
29
131
187

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

score 2 · Answer 9 · answered Oct 18 '16 at 07:59

2

You just add one line css:

.app a {
   display: inline-block;
}

answered Oct 18 '16 at 07:59

Sanjib Debnath

1,912
1
15
14

score 2 · Answer 10 · 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 11 · 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

6,477
1
51
60

score 1 · Answer 12 · answered Jun 09 '20 at 16:32

https://stackoverflow.com/a/53784508/5626747

Can't comment due to reputation, so I'm making another answer:

In this case you will also have to remove the generally suggested display: block; property from the element you set the text-overflow: ellipsis; on, or it will cut off without the ... at the end.

YulePale · Answer 13 · 2021-02-23T09:16:36.550

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:

// css 
.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;
}

.

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

score 0 · Answer 14 · 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 -1 · Answer 15 · answered Jul 22 '13 at 07:41

-1

You can also add float:left; inside this class #User_Apps_Content .DLD_App a

answered Jul 22 '13 at 07:41

Shabbir Lakdawala

77
6

score -2 · Answer 16 · 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

1,422
16
15

answered Jun 11 '18 at 21:04

Siraj Alam

5,569
5
39
55

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

CSS text-overflow: ellipsis; not working?

16 Answers16

Linked

Related