0

ステータスバーにURLを表示したい。ステータスバーには、text-overflow:ellipsis でオーバーフローを処理する行が 1 行だけあるようにします。

長い URL は常に次のように切れます: jadajajajaj-
jadajajajdaj-ajdjjajdaj

jadajajajaj-jadajajajdaj-ajdjのようになりたい...

私は次の範囲までしか得られませんでした：

    <div style="position:fixed;top:12.7ex;left:0ex;display:inline-block;width:100%;z-index:5;text-overflow:ellipsis;background:inherit;">
        <div id="status-bar" class="ui-corner-all"
            style="width:1000%;display:inline-block;margin-right:1.4ex;padding:0.3ex 0.5ex 0ex 1ex;overflow-y:hidden;overflow-x:hidden;color:grey;font-size:3.3ex;height:3.2ex;font-weight:normal;text-align:left;"></div>
    </div>

この問題を克服するために width:1000% を使用していますが、... このような省略記号は表示されません。

CSS プロパティで修正しようとしました -webkit-hyphens:none, word-wrap:normal, Nothing just works... word-wrap: keep-all がありません。これは、chrome 20.0.1132.57 m の現在のバージョンでは認識されません。

4

1 に答える 1

2

text-overflow プロパティを探しています。text-overflow:ellipsis#status-bar にandを適用するとwhite-space:nowrap、目的の効果が表示されます。ただし、省略記号を追加するタイミングと場所をブラウザーが認識できるように、要素の幅を設定する必要があります。(必ず削除または変更してくださいwidth:1000%)

#status-bar {
 text-overflow: ellipsis;
 width: 100%; /* or whatever you prefer */
 white-space: nowrap;
}
于 2012-07-23T21:09:18.347 に答える