Make Text-overflow Ellipsis Work Similary In Firefox And Chrome

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

Solution 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 :)

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

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