テキストオーバーフロー：特定のフォントで省略記号が使用できません。

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>

これが正しく動作するようです。

希望はそれを助けます。乾杯！