text-overflow: ellipsis not working when italic text overflows only one side of the container

Question

I have the following example with italic text. The last letter of the text, since it's italic, overflows the container. However, because its width is still not overflowing "on both sides" of the container, there is no ellipsis shown. This letter can be fully shown by removing overflow: hidden; from css, but I need that for the other ellipsis. Is there any clean/simple way of handling both of these cases with just css?

.main-container {
  background: yellow;
  width: 350px;
  text-align: right;
  font-family: impact;
  font-size: 22px;
  font-style: italic;
}

.some-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div class='main-container'>
  <div class='some-text'>
    <span>Some text in here which is a bit too long</span>
  </div>
  <div class='some-text'>
    <span>Overflow on letter S, no ellipsiS</span>
  </div>
</div>