1

ul>liファイルパスのリストを持つ構造があります。これは約 200px 幅のコンテナに入っているため、長いパスを 1 行で折り返すことは問題なく機能しますが、望ましくありません。

私の主な関心事がファイル名を表示できることを除いて、うまく機能するものを使用できますtext-overflow: ellipses。そのため、最初を切り取って最後を表示する方がよいでしょう。

これは CSS では不可能だと確信しているので、JS を使用する必要があると思います。唯一の問題は、できるだけ目立たないようにする必要があることliです。クリックしました。

これにアプローチする良い方法についてのアイデアはありますか?

私は人々が常にコードを求めていることを知っているので、私がやっていることは次のとおりです。

4

2 に答える 2

1

text-overflowはあると便利な CSS 機能ですが、提供される機能には多少制限があります。切り捨てて、テキストの末尾に省略記号を追加するだけです。ここで求めていることを実行するためのオプションや柔軟性はありません。

Mozilla が FF7 まで Firefox でのサポートを拒否したとき、多くの人 (私を含む) が大騒ぎしましたが、Mozilla がすぐにサポートしなかった理由は、柔軟性の欠如のためでした。

単純な事実は、単純な末尾の省略記号以外のものが必要な場合は、Javascript で行う必要があるということです。コメントで @GolezTrol が指摘した ThreeDots jQuery プラグインが役立つ場合があります。ただし、他のオプションもあります。

于 2012-11-30T20:48:47.757 に答える
1

簡単な解決策は次のようになります (jQuery を使用する場合):

​$('li').each(function() {
    var $this = $(this);
    if ($this.text().length > 20) {
        $this.html($this.text().replace(/^(.*)(.{17})$/, '<span style="display:none">\$1</span><span class="ellipsis">...</span>\$2'));
    }
});​​​​​​​

これは、要素が保持できる文字数がわかっている場合にのみ機能します。この値を計算する JavaScript を追加することでこれを克服できますが、この質問を参照してください。

于 2012-11-30T20:58:06.653 に答える