文本溢出：省略號不能使用某些字體？

這是一個衆所周知的問題，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>

來源

2017-08-25 friedman

[文本溢出省略號未顯示一些自定義字體]的可能的副本（https://stackoverflow.com/questions/28587045/text-overflow-ellipsis-not-showing-with-some-custom-font） –

你需要包括@字體面造型爲雙體船從谷歌的網絡字體助手網站。這可以平滑支持不同的瀏覽器。

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>

這似乎是現在的正常工作。

希望它有助於。乾杯!

來源

2017-08-25 16:54:28

感謝你爲了答案，獅子座，但它看起來不像解決問題。 @ font-face樣式只是導出字體的替代方式。我看不到省略號問題上的任何差異。 – friedman

文本溢出：省略號不能使用某些字體？

回答

相關問題