Ellipsis for inline block item not working only on Safari

Akari Nishii 0
Viewed 25

I'm currently having a problem with Safari with css property text-overflow: ellipsis;. Let's say I want to show some tags(inline-block) inside a container and try to show '...' if tag is too long. And here's the code it works properly on Chrome(Version 104.0.5112.79 (Official Build) (64-bit))

HTML:

<div class="container">
  <div class="tag">aaaa</div>
  <div class="tag">bbbbbb</div>
  <div class="tag">ccc</div>
</div>

CSS:

.container {
  height: 30px;
  
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: lightblue;
  display: block;
}

.tag {
  color: white;
  
  display: inline-block;
  background: brown;
}

and it looks as expected: https://i.stack.imgur.com/kYz8w.png

But in Safari(Version 15.6.1), ellipsis is not working and it looks like this: https://i.stack.imgur.com/xsJg6.png

You can check it here how it works: https://codepen.io/akari0731/pen/KKRVoWW

I feel that I'm missing something but couldn't figure out exactly what. Could anyone help me out here?

ellipsis safari css html
1 Answers

Little bit of a hack but you can set the .tag to display: contents.

Truth be told I am not sure why the original does not work though

alasdair0090
Related