SafariだとCSSのtext-overflowの省略がバグで表示されないサンプル

text-align:centerだとSafariで…が表示されない

あんぱんあんぱんあんぱんあんぱんあんぱん

text-align:rightだとSafariで…が表示されない

あんぱんあんぱんあんぱんあんぱんあんぱん

text-align:leftだとSafariで…が表示される

あんぱんあんぱんあんぱんあんぱんあんぱん

divで囲んでdivにtext-align:centerだと表示される

inline-blockやmin-heightなどで文字列部分を中央配置で可変に

HTML

<h2>text-align:centerだとSafariで…が表示されない</h2>
<p class="a1">あんぱんあんぱんあんぱんあんぱんあんぱん</p>
<h2>text-align:rightだとSafariで…が表示されない</h2>
<p class="a2">あんぱんあんぱんあんぱんあんぱんあんぱん</p>
<h2>text-align:leftだとSafariで…が表示される</h2>
<p class="a3">あんぱんあんぱんあんぱんあんぱんあんぱん</p>
<br>
<h2>divで囲んでdivにtext-align:centerだと表示される</h2>
<div class="wrap">
  <p class="b">あんぱんあんぱんあんぱんあんぱんあんぱん</p>
</div>
<h2>inline-blockやmin-heightなどで文字列部分を中央配置で可変に</h2>
<div class="outer">
  <p class="c">あんぱん</p>
</div>
<br>
<div class="outer">
  <p class="c">あんぱんあんぱんあんぱんあんぱんあんぱん</p>
</div>

CSS

body {
  padding: 10px;
}
h2 {
  margin-bottom: 10px;
  font-size: 14px;
}
.a1,
.a2,
.a3,
.wrap {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100px;
  margin-bottom: 10px;
  border: 1px solid #000;
  text-align: center;
}
.a1,
.a2,
.a3,
.wrap {
  padding-left: 50px;
}
.a2 {
  text-align: right;
}
.a3 {
  text-align: left;
}
.b,
.c {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.outer {
  width: 150px;
  border: 1px solid red;
  text-align: center;
  box-sizing: border-box;
}
.c {
  display: inline-block;
  min-width: 100px;
  max-width: 150px;
  border: 1px solid #000;
  box-sizing: border-box;
}