A design has been created to showcase captions for articles and their respective statuses. The article name box has a fixed width, with text-overflow:ellipsis applied to trim excessively long names. Additionally, a light grey dotted line is added at the end of the article title (if not too lengthy) to enhance the spacing between the title and status.
The issue: Firefox detects that the content (title + dotted block) is too long and truncates it with ellipsis. However, Chrome does not do this and functions as intended.
Screenshots:
https://i.stack.imgur.com/hgHE4.png
To me, it appears that Chrome behaves incorrectly, but it is beneficial to me. Conversely, Firefox functions logically by cutting content when it exceeds length. Yet, why does it truncate at the end of the text rather than the container's end, as suggested by MDN)?
Perhaps I am employing a technique I should avoid in this case. I would appreciate alternative methods to achieve the same visual effect as seen 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 experiment 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)
Thank you in advance for your assistance.