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

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

这似乎现在正常工作。

希望它有所帮助。干杯！

文本溢出：省略号不能使用某些字体？

1 个答案: