次の 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: block
cssに追加します。