Make text-overflow ellipsis work similary in firefox and chrome

Question

I've created a layout to display some articles captions, and their statuses. The box for article name has fixed width, and I'm using text-overflow:ellipsis to cut too long articles names. Also, I'm adding lightgrey dotted line at the end of article's title (if it's not too long), to make the gap between title and status look better.

The problem is: Firefox sees, that conent (title + dotted block) is too long, and cuts it with ellipsis. At the same time, Chrome doenst do it, and work as I need it to.

Screenshots:

For me, it's seems, that Chrome work in a wrong manner, but it's useful for me. And firefox is working just as it logically should - cut the content when it's too long. But, why does it cut it at the end of the text, not at the end of container (as it should, according to MDN)?

Maybe I'm using a hack, that I shouldn't, in this case, I'll be greateful, if you tell me another method of acheivement of such visual effect, as I have in chrome.

minimal example:

HTML:

<p>
    <span class="left-block overflow-ellipsis">
        Very-very long article name, that would not fit in container
        <span class='dots'></span></span>
    <span class="right-block">
        Published
    </span>
</p>
<p>
    <span class="left-block overflow-ellipsis">
        Not so long article name
        <span class='dots'></span>
    </span>
    <span class="right-block">
        Unpublished
    </span>
</p>

CSS:

body
{
    background-color:white;
}

span.left-block {
    display:inline-block;
    width: 300px;
    border: 1px solid white;

    white-space: nowrap;
    overflow: hidden;
    vertical-align:top;
}

span.left-block:hover
{
    display:inline-block;
    border:1px solid red;
}

span.right-block
{
    display:inline-block;
    vertical-align:top;
}

.dots
{
    display:inline-block;
    border-bottom:1px dotted #ddd;
    width:300px;
}

.overflow-ellipsis {
    text-overflow: ellipsis;
}

JsFiddle to play with: https://jsfiddle.net/ka4scx1h/3/

OS: Windows 7 SP1 x64

Chrome version: 57.0.2987.133 (64-bit)

Firefox version: 51.0.1 (32-bit)

Thanks for your help in advance.

Resistive

Answer 1

I've found solution by myself, just by changing layout. The answer, written by LGSon isn't sufficient, because it break IE compatibility of the solution. My method is pretty simple, and it's strange that I've didn't found it till now.

1) I've wrapped inner text (article title) into a inline-block <span class='text-block'>

2) Added style 'max-width:100%; display:inline-block;' and class 'overflow-ellipsis' to this span

3) Removed class 'overflow-ellipsis' from outer block (.left-block)

4) Added styles 'white-space: nowrap; overflow: hidden; display: inline-block;', what was added to .left-block, to .text-block

And everything seems to work now!

body
{
  background-color:white;
}

span.left-block {
  display:inline-block;
  width: 300px;
  border: 1px solid white;
  white-space: nowrap;  
  vertical-align:top;
  overflow: hidden;
}

span.text-block
{
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  max-width:100%;
  
}

span.left-block:hover
{
  display:inline-block;
  border:1px solid red;
}

span.right-block
{
  display:inline-block;
  vertical-align:top;
}

.dots
{
  display:inline-block;
  border-bottom:1px dotted #ddd;
  width:300px;
}

.overflow-ellipsis {
  text-overflow: ellipsis;
}

<p>
<span class="left-block"><span class='text-block overflow-ellipsis'>Very-very long article name, that would not fit in container</span><span class='dots'></span></span>
<span class="right-block">
Published
</span>
</p>
<p>
<span class="left-block"><span class='text-block overflow-ellipsis'>Not so long article name</span><span class='dots'></span></span>
<span class="right-block">
Unpublished
</span>
</p>

JsFiddle with results: https://jsfiddle.net/ka4scx1h/6/

Thanks all who tried to think on my problem :)

Resistive

Plus 1 for a display: inline-block/white-space: nowrap version ... and I'm sure my tip, wrapping the main text, partly gave you how-to.... :) – Auxesis

Maybe it's your tip, or maybe I've read MDN description about text-overflow principles carefully :) – Resistive

Answer 2

Appears to be some bug, or different behavior, in Firefox.

As a workaround, and as text-overflow: ellipsis only works on block element, I combined flexbox with wrapping both the text and dots, so the text element can have display: block

body {
  background-color: white;
}

span.left-block {
  display: inline-flex;
  width: 300px;
  border: 1px solid white;
  vertical-align: top;
}
span.left-block > span:first-child {
  display: block;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
}

span.left-block:hover {
  border: 1px solid red;
}

span.right-block {
  display: inline-block;
  vertical-align: top;
}

.dots {
  flex: 1;
  border-bottom: 1px dotted #ddd;
}

.overflow-ellipsis > span:first-child {
  text-overflow: ellipsis;
}

<p>
  <span class="left-block overflow-ellipsis"><span>Very-very long article name, that would not fit in container</span><span class='dots'></span></span>
  <span class="right-block">
Published
</span>
</p>
<p>
  <span class="left-block overflow-ellipsis"><span>Not so long article name</span><span class='dots'></span></span>
  <span class="right-block">
Unpublished
</span>
</p>

Auxesis

It works, but, according to caniuse.com/#search=inline-flex, inline-flex wouldn't be working in IE lower than v11, I'll try to workaround it... – Resistive

Answer 3

div, p{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  -moz-binding: url('ellipsis.xml#ellipsis');
  display: block;
}

<div>
The toppings you may chose for that TV dinner pizza slice when you forgot to shop for foods, the paint you may slap on your face to impress the new boss is your business. But what about your daily bread? Design comps, layouts, wireframes—will your clients accept that you go about things the facile way? Authorities in our business will tell in no uncertain terms that Lorem Ipsum is that huge, huge no no to forswear forever. Not so fast, I'd say, there are some redeeming factors in favor of greeking text, as its use is merely the symptom of a worse problem to take into consideration.
</div>

<p>
There's lot of hate out there for a text that amounts to little more than garbled words in an old language. The villagers are out there with a vengeance to get that Frankenstein, wielding torches and pitchforks, wanting to tar and feather it at the least, running it out of town in shame.
</p>

Astringent

This looks good, while your text string is much longer than the containers. But what if the text is shorter? In my question I needed to draw dotted line from the end of short text to the end of container, just look at the pictures in my question. – Resistive