Text overflow hides text when it shouldn't in Safari

Question

I want to have various tags in a container and have them display ellipsis when the tag text is too big (i.e. when it would stretch beyond the width of the container). The problem I am facing is that in Safari, the ellipsis are displayed even though the tag has space to display the full content.

This is the code that shows what I'm trying to achieve:

.tag {
  height: 30px;
  background: #F67;
  line-height: 30px;
  display: block;
  float: left;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 5px;
  margin: 5px 5px 0;
  border-radius: 16px;
}
.content {
  float: left;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon {
  float: right;
  background: blue;
  width: 20px;
  text-align: center;
  color: white;
  text-decoration: none;
}
.container {
  border: 2px solid blue;
  width: 300px;
  height: 400px;
  padding: 10px;
}

<div class="container">
  <div class="tag">
    <span class="content">Some tag</span>
    <a href="#" class="icon">X</a>
  </div>
  <div class="tag">
    <span class="content">Some tag</span>
    <a href="#" class="icon">X</a>
  </div>
  <span class="tag">
        blahbsalkfnewijfnewifbwiefnbijfneifjnweifniwjenfewi
      </span>
  <div class="tag">
    <span class="content">Some tags</span>
    <a href="#" class="icon">X</a>
  </div>
</div>

If you're running the snippet above in Safari(v8.0.8 is the one I am using) you can see the last tag shows ellipsis even though it still has space to stretch and display the full text. If you can't see what I am talking about here is a screenshot of the issue: text-overflow problem on safari image

Small mention about the 'X' is that it is intended as an icon someone could click on and delete the tag, but that functionality is not the subject of this question.

Answer 1

I'm using this trick: adding a non-break space right after the text. You can add it directly into your html, like <div class="ellipsis">Test&nbsp;</div> or you can use the :after pseudo element. Here's the .ellipsis class that I'm using:

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

.ellipsis:after {
  content: "\0000a0";
  display: inline-block;
  width: 0;
}

The use of :after has another advantage, it's hidden by setting width: 0;, so you won't notice a larger gap between this element and the thing next to it (another element or a border).