Text overflow ellipsis the dots should be center of the text

Question

I want the ellipsis dots should be center of the text. When I use the text-overflow: ellipsis, it shows the dots last, while I want them to be centered.

p.test1 {
    white-space: nowrap; 
    width: 100px; 
    border: 1px solid green;
    overflow: hidden;
    text-overflow: ellipsis;
    padding:10px;
}

<p class="test1">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18</p>

The above example shows the result like this

1 2 3 4 5 6 7 8 9...

Expected result something like is:

1 2 3 4 5 6 ... 13 14 15 16 17 18

Answer 1

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>

Answer 2

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