text-overflow: ellipsis not working

Question

This is what I tried (see here):

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Essentially, I want the span to shrink with ellipsis when the window is made small. What did I do wrong?

the requirements for ellipsis to work: http://stackoverflow.com/a/33061059/3597276 — Michael Benjamin, Jan 13 '16 at 12:31
The problem I had when I thought it wasn't working was I didn't set the width long enough (10px). So I was cutting off the ellipsis, doh! — Rod, Dec 21 '16 at 18:01
You need `display: block` with `width: 100%;` or `display: inline-block.` Ellipsis cannot be calculated in `display:inline` element (span's default.) See this [text overflow not working tutorial](https://semicolon.dev/tutorial/css/text-overflow-ellipsis-doesnt-work) for implementation. — InfiniteStack, Aug 25 '22 at 00:35
Make sure to explicitly specify width[.](https://semicolon.dev/stackoverflow/question/9/how-to-fix-css-text-overflow-ellipsis-not-working-in-a-span-element) — InfiniteStack, Aug 05 '23 at 22:47

yunzen · Accepted Answer · 2020-08-20T09:40:10.610

571

You need to have CSS overflow, width (or max-width), display, and white-space.

http://jsfiddle.net/HerrSerker/kaJ3L/1/

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

<span>Test test test test test test</span>

Addendum If you want an overview of techniques to do line clamping (Multiline Overflow Ellipses), look at this CSS-Tricks page: https://css-tricks.com/line-clampin/

Addendum2 (May 2019)
As this link claims, Firefox 68 will support -webkit-line-clamp (!)

edited Aug 20 '20 at 09:40

answered Nov 03 '11 at 10:08

yunzen

32,854
11
73
106

12

The white-space property was what I was missing. Thanks. – nebulousGirl Aug 17 '12 at 13:43
84

It sucks that you need the `white-space: nowrap;` property. Now you only can make one line of text end with ... instead of a block text. – Sven van Zoelen Aug 23 '12 at 10:04
For Firefox, we also need to specify a `height` property, e.g.: `height:10px`. – Saurabh May 10 '13 at 21:44
This answer was posted over 2 years ago, when the browser support was much worse than it is today. – Shivam Sarodia Dec 06 '13 at 18:45
3

Today, all the major browsers support ellipsis: http://caniuse.com/#feat=text-overflow – kazy Oct 02 '14 at 23:26
I am using % for width in my DIV but I don't see the ellipses :/ http://stackoverflow.com/questions/26342411/how-to-display-an-image-next-to-some-texts – SearchForKnowledge Oct 13 '14 at 15:29
It's worth noting that you also need the `overflow: hidden` as mentioned by @ZippyV in his answer. – Paweł Sokołowski Apr 18 '15 at 15:15
How would the solution look like with multiple lines, e.g. by saying width:250px and height:200px? – basZero Feb 01 '16 at 14:35
3

@basZero Multiline Ellipsis is not supported with CSS alone. You have to take other measures – yunzen Feb 01 '16 at 15:13
If you want to cut the text in a large block, you are better off cutting it down in the back-end with string manipulation to cut the text down and add the dots at the end. – markthewizard1234 Feb 18 '16 at 10:16
Yeah, but presentation sucks. As the number of characters of two different texts may be the same, but the text-width may differ. You cannot solve this on the server, as it depends on OS, browser and screen/window size – yunzen Feb 18 '16 at 13:57
you also have to make sure your font supports ellipsis – quemeful Sep 13 '16 at 11:19
@quem you can of course just add a custom string `text-overflow: " ..."` – yunzen Sep 14 '16 at 13:37
1

You need to specify a width so the container is bound, you need to set overflow:hidden so the browser will hide the run-over text, and then set text-overflow:ellipsis to instruct the browser how to especially handle text overflow hiding. – Michael Angstadt Dec 29 '16 at 20:28
2

Yes, 256th upvote. There is a certain rewarding feeling about having a power-of-2 amount of upvotes... – Michahell Jan 09 '18 at 16:18
@Hoffmann Why? Do you have an example, where it is not working? – yunzen Aug 13 '18 at 13:43
@HerrSerker For some reason it only works with display block elements. Check this codepen: https://codepen.io/anon/pen/JaoxJv – Hoffmann Aug 22 '18 at 09:09
@Hoffmann Wrap the content in your flex in a div and add ellipsis style to that: https://codepen.io/HerrSerker/pen/MqYdWy – yunzen Aug 22 '18 at 10:47
on chrome 68, i could achieve it whitout white-space – Mechanic Aug 22 '18 at 12:01
@HerrSerker sure that works, but if your element has say flex:1 to be able to fit its display:flex parent then wrapping it would break that – Hoffmann Sep 05 '18 at 12:19
@Hoffmann I updated my pen: https://codepen.io/HerrSerker/pen/MqYdWy Check it again! – yunzen Sep 06 '18 at 10:32
For those using bootstrap 4, this can be accomplished by adding these classes to the span element: "d-block text-nowrap text-truncate w-100" – Luciano Nov 22 '20 at 07:37
if you have a dynamic width parent container, you can set min-width: auto to adjust to content. Then you will have ellipses when you shrink smaller than the word. – afriedman111 Sep 18 '21 at 16:57

score 51 · Answer 2 · answered Nov 03 '11 at 10:13

51

Make sure you have a block element, a maximum size and set overflow to hidden. (Tested in IE9 and FF 7)

http://jsfiddle.net/uh9zD/

div {
    border: solid 2px blue;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50px;
}

answered Nov 03 '11 at 10:13

ZippyV

12,540
3
37
52

5

Seems like that white-space:nowrap property may be generally necessary as well, for anything with spaces. – Kzqai Jul 17 '12 at 14:05
There is quirk in IE -- [IE doesn't wrap a second word](http://jsfiddle.net/vgLwbxsx/1/) (tested in IE 11)... Go figure. Works in any other browser as expected (including good old Opera 12). – Nux Jun 26 '15 at 12:43
1

@Nux This is also not working as expected in MS Edge browser – yunzen Aug 13 '18 at 13:47

score 30 · Answer 3 · answered Aug 18 '14 at 16:00

30

For multi-lines in Chrome use :

display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // max nb lines to show
-webkit-box-orient: vertical;

Inspired from youtube ;-)

answered Aug 18 '14 at 16:00

Arraxas

411
5
8

1

This is a very interesting solution. It uses `-webkit-*` properties, but is supported in all major browsers. More info can be found here: https://css-tricks.com/almanac/properties/l/line-clamp/ – dkniffin Apr 14 '20 at 19:38

score 13 · Answer 4 · answered Sep 08 '17 at 07:59

For multiple lines

In chrome, you can apply this css if you need to apply ellipsis on multiple lines.

You can also add width in your css to specify element of certain width:

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

<p class="multi-line-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

score 7 · Answer 5 · answered Jun 25 '14 at 10:31

7

word-wrap: break-word;

this and only this did the job for me for a

<pre> </pre>

tag

everthing else failed to do the ellipsis....

answered Jun 25 '14 at 10:31

aimiliano

1,105
2
12
18

score 7 · Answer 6 · answered Aug 29 '14 at 21:12

7

Just a headsup for anyone who may stumble across this... My h2 was inheriting

text-rendering: optimizelegibility; 
//Changed to text-rendering: none; for fix

which was not allowing ellipsis. Apparently this is very finickey eh?

answered Aug 29 '14 at 21:12

Ben Racicot

5,332
12
66
130

score 6 · Answer 7 · answered Nov 13 '14 at 15:50

I was having an issue with ellipsis under chrome. Turning on white-space: nowrap seemed to fix it.

max-width: 95px;
max-height: 20px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: solid 1px black;
font-size: 12pt;
text-align: right;
white-space: nowrap;

Shahbaz A. · Answer 8 · 2020-08-30T07:23:53.390

5

Without Fixed Width

For those of us that do not want to use fixed-width, it also works using display: inline-grid. So along with required properties, you just add display

span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-grid;
}

edited Aug 30 '20 at 07:23

answered Apr 17 '20 at 13:29

Shahbaz A.

4,047
4
34
55

`display: inline-grid` gave some undesired results for me, `display: inline` worked though! – tonyjmnz Apr 07 '21 at 23:57

score 3 · Answer 9 · answered Aug 11 '14 at 11:13

Add this below code for where you likes to

example

p{
   display: block; /* Fallback for non-webkit */
   display: -webkit-box;
   max-width: 400px;
   margin: 0 auto;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 }

score 1 · Answer 10 · answered Jan 05 '16 at 04:23

You may try using ellipsis by adding the following in CSS:

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

But it seems like this code just applies to one-line trim. More ways to trim text and show ellipsis can be found in this website: http://blog.sanuker.com/?p=631

score 1 · Answer 11 · answered Apr 17 '23 at 01:48

This code would work great and also thanks to the title HTML prop the full text will be shown on-hover by default

.truncated {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis; 
  /* Optional: set a fixed max-width or width to the element if needed */
  max-width: 200px; /* max-width: 100%; also works */
}

<div class="truncated" title="This is a long text that will be truncated, but showed on hover">
  This is a long text that will be truncated, but shown on hover
</div>

score 0 · Answer 12 · answered Oct 06 '17 at 12:33

0

Add the Following lines in CSS for ellipsis to work

 p {
     display: block; // change it as per your requirement
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

answered Oct 06 '17 at 12:33

Manoj Selvin

2,247
24
20

score 0 · Answer 13 · answered Jun 03 '22 at 13:06

I use:

overflow-x: clip to just collapse it horizontally
white-space: nowrap to avoid a new line
text-overflow: ellipsis to add the ... at the end

overflow-x: clip;
white-space: nowrap;
text-overflow: ellipsis;

Have into account that display as flex it wont work, just change it to one that suites your needs.

text-overflow: ellipsis not working

13 Answers13

For multiple lines

Without Fixed Width

Linked

Related