2

jQueryの問題を解決しようとしています。最近の投稿からウィジェットを作成する wordpress プラグインを使用しています。プラグインは、CSS と jQuery でフォーマット/ハックしようとしているコードを自動生成します。自動生成される項目の 1 つは見出しです。

<h4 class="srp-post-tilte">HEADLINE HERE</H4>

私のデザインは、特定の長さを超えないこの見出しに依存しています。（約45文字）。このプラグインは、まさにこの号の見出しの後に省略記号を追加するオプションを提供します (私は 45 文字に設定しました)。問題は、見出しが 45 文字未満の場合でも省略記号が表示されることです。

そのため、この機能をオフにして、jQuery で実行しようとしています。見出しが 45 文字にトリミングされている状況でのみ、省略記号を追加したいと思います。これを試しましたが、うまくいきません。

if ($j("h4.srp-post-title").val().length > 44) { 
         // Show the elipsis
            $j('h4.srp-post-title').append("...");
} else {
         // Don's show the elipsis (do nothing)
        $j('h4.srp-post-title').append("");
}

誰かが助けることができれば、それは非常に高く評価されます. http://dreamlets.sfplanning.org/で実際の例を見ることができますが、そこには大量の CSS が含まれているため、内部で何が起こっているのかを解読するのは難しい場合があることに注意してください。

4

4 に答える 4

3

使ってみましたtext-overflow: ellipsis;か？

.srp-post-tilte {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

Chromeで試してみましたが、問題はありません！

ここに画像の説明を入力

于 2013-03-04T03:17:33.083 に答える
1

解決

var header = $('h4.srp-post-title').text();
if( $('h4.srp-post-title').text().length > 45 )
    $('h4.srp-post-title').html(header.substring(0,45) + '&hellip;');

Working example

説明

まず、APIの使用ミスがあります。必要なものを取得するには、text()メソッドの代わりにメソッドを使用してください。val()あれは：

$j("h4.srp-post-title").text().length

それ以外の

$j("h4.srp-post-title").val().length

val()value要素の属性を取得するだけで、主にinputフィールドから値を取得するために使用されます。

&hellip;また、探している正しい文字であるため、（3つのドットの代わりに）HTMLエンティティを追加します。

また、トリミングがまったく行われていないことに気づきました。これは単なる例であるかどうかはわかりません。いずれにせよ、あなたはあなたのテキストをトリミングするために私が上で述べたような何かをしなければならないでしょう。

基本的には、タイトルが45文字より長いかどうかを確認してから、substringstringメソッドを使用して最初の45文字を取得し、省略記号を追加します。Voilà。

ちなみに、プラグインの動作を変更する方が良いオプションかもしれませんが、それほど難しいことではありません。結局、あなたの選択。

于 2013-03-04T02:38:06.020 に答える
0

テキストの一部を切り取ってから、次のように省略記号を適用する必要があります。

$j("h4.srp-post-title").text(function(i, txt) {
    return txt.substring(0,42) + (txt.length > 45 ? '...' : '');
});

フィドル

于 2013-03-04T02:47:40.310 に答える
0

私はこれ (およびそれ以上のこと) を行う ellipsify というプラグインを作成しました。

次のように使用します。

$j("h4.srp-post-title").ellipsify({
    count: 45
});

https://github.com/ethagnawl/ellipsify

于 2013-03-04T03:33:53.167 に答える