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"

Noellenoellyn

related #802675 – Tillo

related: Applying Ellipsis to Multiline Text – Ragen

Answer 1

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:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
• https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Slicer

What if I can't use set width due to responsive design? – Lunar

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) – Corvette

For responsive behaviour simply change inline-block to block, e.g. jsfiddle – Hypophosphate

white-space: nowrap... that was it for me. – Salaam

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. – Wrestling

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 – Supercharger

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. – Prolong

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. – Polyhistor

@Polyhistor I used width:100% but required position:static as well (absolute did not work, I didn't try too many others) – Suffuse

Don't need to set a width. Works on chrome without it. Just needs to be a block element and static/relative positioning. – Strapping

To overcome the percentage limitation, you can wrap it in calc() as in : width: calc(90%) (tested on chrome 63 and IE11) – Businesslike

calc() wasn't an option when the question was asked. But yes, it does indeed solve a lot of problems like this. – Slicer

For me, adding the following css to my div, did the trick: display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; – Authoritative

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. – Pitch

display:flex also doesn't appear to support text-overflow:ellipsis. Changing to display:block shows the ellipsis. – Sandfly

It didn’t work for me because it was display: flex, I set display: block and everything was fine. – Coachman

@AlexandrKazakov - yep, bear in mind that this answer was written before display:flex was a thing. :-) – Slicer

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. – Karney

the part about the width isn't true – Let

@Lunar you can set max-width as 0 for responsive one. reference here - css-tricks.com/tale-width-max-width – Contradict

I also found using display: flex defeats text-overflow: ellipsis setting. – Plutocracy

In some cases, you only need to add overflow: hidden to the container element. – Kalinda

If you can't specify the width in pixels as @Slicer says, you can still achieve the three dots by specifying min-width in pixels as well. Nice flex example: css-tricks.com/flexbox-truncated-text – Orpah

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. – Shopworn

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. – Suilmann

Just wanted to say, these comments are great I learned so much about text-overflow: ellipsis from just this. – Parvati

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 – Autoradiograph

Thanks, I used display: inline-block in a span with your answer. – Polysyllabic

I got it working without setting a set width in pixels. The outisde container has width in % and it constrains my text. – Rebak

Answer 2

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]%).

Mien

Awesome, just adding that overflow: hidden; is also needed – Impractical

This does not seem to be true in my case, I've got width: calc(100% - 20px); but no overflow is created. – Katherinakatherine

Dynamic width, eg: 100%, is possible. Also, please don't forget to add width in the parent component before applying this solution. – Culdesac

Answer 3

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.

Higinbotham

Great solution - it's also the only one posted here that works for a position: sticky element within a display: flex container. – Epigeous

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) – Euphrosyne

For an in depth explanation on "why this is necessary" I suggest to read the following answer on another question – Antecedents

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. – Thinskinned

The explanation to this answer: https://mcmap.net/q/37890/-prevent-flex-items-from-overflowing-a-container – Incompetent

Note to self: Consider overflow-wrap: break-word; instead of ellipsis. – Incompetent

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 – Kalidasa

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. – Leash

Answer 4

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>

Hipbone

I found that, if you have a hierarchy of children, you need to set the dynamic-with-child on all of them – Claudclauddetta

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. – Carboloy

Answer 5

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;
  }
}

Flori

display: block did the trick for me (using Chrome), <a> tags are by default inline. – Elysian

Answer 6

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;
}

Oxygenate

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. – Unsightly

Answer 7

Just add in the div containing that paragraph

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

Rafflesia

Answer 8

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

demo

Idocrase

I just checked and it is cutting off :/ – Lunar

you need text-overflow: ellipsis; not text-overflow: "..."; – Blinkers

Answer 9

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

Ceasar

Answer 10

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

Jeans

Answer 11

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>

Chorion

Answer 12

MUST contain

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

MUST NOT contain

display: inline

SHOULD contain

position: sticky

Beall

Answer 13

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

Buoy

Answer 14

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>

Kirghiz

Answer 15

You just add one line css:

.app a {
   display: inline-block;
}

Panacea

Answer 16

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>

Chesna

Answer 17

If you're trying to add text ellipsis inside a flex element. Make sure either you pass width to the child element or simply add max-width: 0

Catchascatchcan

Answer 18

Write these in your css rule.

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

Hypoxia

You can also look through this, jsfiddle.net/ManiAnand/5v6pfy9w – Selfdevotion

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? – Hypoxia

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. – Mahaffey

Width has already been set by the op. I gave snippet to add in his codes – Hypoxia

Answer 19

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

#User_Apps_Content .DLD_App a

Caesar