☰

テキストオーバーフロー: 省略記号が機能しない 質問する

tag-icon • tag-icon html css
テキストオーバーフロー: 省略記号が機能しない 質問する

これは私が試したことです（ここ):

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
}

本質的には、ウィンドウが小さくなったときに、省略記号を使用してスパンを縮小したいのですが、何が間違っていたのでしょうか?

ベストアンサー1

overflowCSS 、width(またはmax-width)、、displayが必要ですwhite-space。

http://jsfiddle.net/HerrSerker/kaJ3L/1/

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}


body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}
<span>Test test test test test test</span>

補足行クランプ (複数行オーバーフロー楕円) を行うテクニックの概要を知りたい場合は、次の CSS-Tricks ページを参照してください。https://css-tricks.com/line-clampin/

補遺2（2019年5月
）リンク主張によれば、Firefox 68 は-webkit-line-clamp(!)をサポートする予定です。

おすすめ記事