テキストオーバーフロー奇妙な行動異なるフォントで

私は、この動作を示すために、単純なWebサイトを作った：テキストオーバーフロー奇妙な行動異なるフォントで

<head> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
     <link href="./site.css" rel="stylesheet"> 
     <title>Document</title> 
</head> 
<body> 
    <ul class="list-group"> 
    <li class="list-group-item"> 
     <a><span class="glyphicon glyphicon-remove"></span></a> 
     <span class="label label-primary"> LABEL </span> 
     aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa //overflowed text 
    </li> 
</ul> 
</body>

とCSS：

.list-group-item { 
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 
    font-family: "Open Sans", sans-serif; // if i comment this line it works 
} 

a { 
    float:right; 
} 

.label { 
    float:right; 
    margin-right: 6px; 
}

結果"Open Sans"

で"Helvetica Neue"

その権利ですか？それはOpen Sansで動作するようにするには？

出典

2017-07-13 gog

問題を再現できませんでした - 十分なスペースがない場合は、すべての項目が省略記号で終わります。あなたはどのOSとブラウザを使用していますか？

.list-group-item { 
 
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 
 
    max-width: 300px; 
 
} 
 
.helvetica { 
 
    font-family: "Helvetica Neue", sans-serif; 
 
} 
 
.open-sans { 
 
    font-family: "Open Sans", sans-serif; 
 
} 
 
a { 
 
    float:right; 
 
} 
 

 
.label { 
 
    float:right; 
 
    margin-right: 6px; 
 
}

<head> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
 
     <link href="./site.css" rel="stylesheet"> 
 
     <title>Document</title> 
 
</head> 
 
<body> 
 
    <ul class="list-group"> 
 
    <li class="list-group-item"> 
 
     <a><span class="glyphicon glyphicon-remove"></span></a> 
 
     <span class="label label-primary"> LABEL </span> 
 
     aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa //overflowed text 
 
    </li> 
 
    <li class="list-group-item open-sans"> 
 
     <a><span class="glyphicon glyphicon-remove"></span></a> 
 
     <span class="label label-primary"> LABEL </span> 
 
     aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa //overflowed text 
 
    </li> 
 
    <li class="list-group-item helvetica"> 
 
     <a><span class="glyphicon glyphicon-remove"></span></a> 
 
     <span class="label label-primary"> LABEL </span> 
 
     aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa //overflowed text 
 
    </li> 
 
</ul> 
 
</body>

出典

2017-07-13 16:30:16 fen1x

は確認することができます。 'text-overflow'はフォントの選択に関係なく期待どおりに動作するようです。 Fiddle：https://jsfiddle.net/yg5u623v/ –

を参照してください。Windows 10 with google chrome。私はそれを再現することができないので、私はjsfiddleや他の投稿を投稿しませんでしたが、私はここにどのように投稿し、あなたのブラウザでローカルに実行するこれらの2つのファイルを持つフォルダを作成しようとします。 – gog

ローカルで試してみましたが、すべて正常に動作します。あなたはオープン・サンでそれを試している間、あなたはその 'text-overflow：省略記号 'を持っていない可能性がありますか？ – fen1x

テキストオーバーフロー奇妙な行動異なるフォントで

答えて

関連する問題