Text overflow ellipsis the dots should be center of the text

One simple solution would be to add a span inside the p tag and make it show ellipsis on text overflow, and add the last word after the span tag. 

p.test1 {
  white-space: nowrap;
  display: inline-block;
  border: 1px solid green;
  padding: 10px;
}

.elips {
  display: inline-block;
  vertical-align: bottom;
  white-space: nowrap;
  width: 100%;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}
<p class="test1"><span class="elips">1 2 3 4 5 6 7 8 9 10 11 12</span> 13 14 15 16 17 18 Add Last word here</p>

This isn't possible with pure css but if you are unable to use js or a server side language to achieve what you want, you can use the following - it's a bit of a hack but works quite well. The only downside is that you will be duplicating your numbers:

p.test1 {
  width: 200px;
  border: 1px solid green;
  padding: 10px;
  white-space:nowrap;
}

p > span {
  white-space: nowrap;
  overflow: hidden;
  vertical-align:middle;
}

.ellipsis {
  display: inline-block;
  width: calc(50% + 1.2em);
  text-overflow: ellipsis;
}

.indent {
  display:inline-flex;
  width: calc(50% - 1.2em);
  justify-content:flex-end;
}
<p class="test1">
  <span class="ellipsis">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18</span><!--
  --><span class="indent">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18</span>
</p>

Here is a fiddle to play with - change the p width and you will see how it works, not perfect but the best you'll get with pure css without manually calculating where the split will be

Tags:

Html

Css

Recent Posts