ExamplesEdit

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;
}