CSS: текстовое содержимое обрезается в Safari, но не в Chrome.

Question

Различное поведение в Safari и Chrome при усечении текстового содержимого с заполнением. В chrome достаточно места для размещения содержимого в контейнере, но в Safari текст обрезается.

HTML:

<div class="text-container">
  <div class="text-ellipsis">
    Lorem ipsum dolor sit
  </div>
</div>

CSS:

* {
  box-sizing: border-box;
}

.text-container {
  width: 165px;
  padding: 0 5px;
  color: #fff;
  background-color: #4f5d8f;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;
}

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

JSFiddle с примером