次の CSS が機能しないのはなぜですか?
a {
width: 60px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
次の CSS が機能しないのはなぜですか?
a {
width: 60px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
これは、アンカーが標準のinline要素であるためです。追加display:inline-blockすると、上記のコードが機能します。
ボックスモデル用display:blockです、仕事をします
a {
width: 60px;
display:block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
ただし、アンカー (インライン要素) をボックス モデル要素 (display:block) のように動作させると、他の問題が発生する可能性があります。
参考: テキストオーバーフロー
アップデート:
display:inline-block
display: blockcssに追加します。