display multiple lines and show ellipsis for text-overflow doesn't work on firefox

Question

Here's the jsfiddle: jsfiddle.net .html:

  <span class="fileName" >long name file to display long name file to displayddddddssdd moreggggg lines more lines more more more lines</span>

.scss:

.fileName {

  -webkit-font-smoothing: antialiased;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; 

  font-size: 17px;
  line-height:  1.4;
  max-height: 71.4px;


  overflow:hidden;
  display: -webkit-box;
  text-overflow: ellipsis;


  width: 175px;


}

The text will not wrap or truncate in Firefox. But wraps and shows ellipsis in Safari and Chrome.

Is text-overflow: ellipsis; supported in Firefox? I included other parts of scss as I need the text to be shown in 3 lines. So I cannot use display:inline-block or white-space: nowrap; property.

Is there a workaround for Firefox ? Thanks.

There is no such thing as `-webkit-box` in the spec. `-webkit-box` is actually a sort-of workaround for old Safari and Chrome versions. — Alexander O'Mara, Aug 29 '16 at 20:03
I tried "box" in the jsfiddle link, it still shows no wrap or truncate. — Jane, Aug 29 '16 at 20:05
You actually need `display: flex`, which is the spec compliant property. — Alexander O'Mara, Aug 29 '16 at 20:07
Display as flex seems like a different thing.. It might be the same as display:block. But the page stills shows different in Firefox, which doesn't hide overflow or show ellipsis. — Jane, Aug 29 '16 at 20:09
It might be the same effect as display:block. But the page stills shows wrongly, which doesn't hide overflow or show ellipsis. — Jane, Aug 29 '16 at 20:16
Yeah, that's probably because you have a whole bunch of other non-standard CSS properties that simply aren't widely supported. Don't expect anything with vendor prefixes like `-webkit-` to work cross-browser, or necessarily into the future. — Alexander O'Mara, Aug 29 '16 at 20:20
[Applying Ellipsis to Multiline Text](http://stackoverflow.com/q/33058004/3597276) — Michael Benjamin, Aug 29 '16 at 20:30

score 0 · Answer 1 · answered Aug 29 '16 at 20:16

0

Try:

display: -webkit-box;
display: -moz-box;  // Firefox
display: -ms-flexbox;
display: flex;

I think only old versions Safari use display: -webkit-box;. more info here.

answered Aug 29 '16 at 20:16

Ted Goas

7,051
1
35
42

Thank you for the reference and answer. I modified my question to include the focus on displaying multiple lines and showing ellipsis of text-overflow. With change you mentioned, the `overflow:hidden ` and `text-overflow:ellipsis ` are still not working. – Jane Aug 29 '16 at 20:28
Thanks. I notice `.fileName` is a `` (and is `display:inline;` by default), have you tried setting it as `display:inline-block;` or `display:block;` so it maintains any height or width give it? – Ted Goas Aug 29 '16 at 20:39

display multiple lines and show ellipsis for text-overflow doesn't work on firefox

1 Answers1