文本溢出：省略号不适用于某些字体？

Question

这是一个众所周知的问题，text-overflow: ellipsis 似乎不适用于某些字体？请检查以下示例。首先span 也应该以省略号结尾，而不是。 我应该怎么做才能让它发挥作用？

@import url(https://fonts.googleapis.com/css?family=Catamaran&subset=latin,latin-ext);

*{
  font-family: Catamaran;
}

span.eli{
  text-overflow: ellipsis;
  overflow: hidden;
  width: 30%;
  display: inline-block;
  white-space: nowrap;
}

span.arial{
  font-family: sans-serif;
}

<span class="eli">Some real long text some real long text  some real long text  some real long text  some real long text  some real long text  some real long text  some real long text  some real long text </span><span>Short</span><span>Short</span>
<span class="eli arial">Some real long text some real long text  some real long text  some real long text  some real long text  some real long text  some real long text  some real long text  some real long text </span><span>Short</span><span>Short</span>

Answer 1

您需要包含来自 google webfonts 帮助站点的双体船的 @font-face 样式。这平滑了对不同浏览器的支持。

Google Webfonts Helper Site

/* catamaran-regular - latin */
@font-face {
  font-family: 'Catamaran';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/catamaran-v2-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Catamaran'), local('Catamaran-Regular'),
       url('../fonts/catamaran-v2-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/catamaran-v2-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/catamaran-v2-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/catamaran-v2-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/catamaran-v2-latin-regular.svg#Catamaran') format('svg'); /* Legacy iOS */
}

@import url(https://fonts.googleapis.com/css?family=Catamaran&subset=latin,latin-ext);

*{
  font-family: Catamaran;
}

span.eli{
  text-overflow: ellipsis;
  overflow: hidden;
  width: 30%;
  display: inline-block;
  white-space: nowrap;
}

span.arial{
  font-family: sans-serif;
}

<span class="eli">Some real long text some real long text  some real long text  some real long text  some real long text  some real long text  some real long text  some real long text  some real long text </span><span>Short</span><span>Short</span>
<span class="eli arial">Some real long text some real long text  some real long text  some real long text  some real long text  some real long text  some real long text  some real long text  some real long text </span><span>Short</span><span>Short</span>

这似乎现在可以正常工作了。

希望对您有所帮助。干杯！