1
4

4 に答える 4

5

javascript を使わずに css を使って処理できます。文字列が幅を超えた場合text-overflowの効果を作るためのcssがあります。...元のテキストを表示したい場合は:hover、css を追加してオーバーフロー境界を削除します。

別の方法は、javascript を使用してコンテンツの長さを数え、省略記号でコンテンツを変更することです。また、元のテキストを表示したい場合は、使用hover()しますが、最初に元のテキストを保存する必要があります。

したがって、2つの解決策があります。詳細については、これを確認してください: http://jsfiddle.net/zqfhx/1/

CSS

<style type="text/css">
.w100C {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
    width: 100px;
    min-width: 0;
}

.w100C:hover {  
    overflow: none;
    width: auto;
}
</style>

HTML

<div class="w100C">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever s
</div>

Javascript(jQuery)による代替方法

JavaScript

$(document).ready(function() {

    function TruncateText(text)
    {
        if(text.length > 12)
        {
             text = txt.substring(0,12) + "...";
        }
        return text;
    }

    var txt = $("#abc").text();
    $("#abc").attr("orgTxt", txt);
    txt = TruncateText(txt);
    $("#abc").text(txt);

    $("#abc").hover(function(){
        var t = $("#abc").attr("orgTxt");
        $("#abc").text(t);
    }, function(){
        var t =  $("#abc").text();
        t = TruncateText(t);
        $("#abc").text(t);
    });    
});

HTML

<div id="abc">I am very long string</div>

個人的には、JavaScript の代わりに CSS を使用することをお勧めします。これは、スタイルを設定してスクリプトの実行を減らすことで複数の要素を処理できるためです。

于 2013-03-05T15:14:16.120 に答える
3

これはjQueryを必要としません

var str = "whatever here"
var shortened = str.length > 15 ? str.substring(0,12) + '...' : str;
于 2013-03-05T15:07:52.807 に答える
0

要素のサイズに基づいて「フィット」しようとしているだけの場合は、 を試してみてくださいtext-overflow。

説明のための JSFiddle

テキストオーバーフローに関する Moz Docs

于 2013-03-05T15:14:27.410 に答える
0

コンテンツが id "content" の div 内にあり、文字列が longString 変数内に保存されていると仮定します

$(document).ready(function() {
    var contentDiv = $("#content");
    contentDiv.html(longString.substr(0,12) + "...");

    contentDiv.mouseover(function(){ 
         this.html(longString);
    });

    contentDiv.mouseout(function(){
         this.html(longString.substr(0,12) + "...");
    });
});

これはテストされていませんが、必要な表示と非表示の機能が提供されるはずです。また、文字列は常に 12 文字以上であると想定しています。エラー チェックが必要な場合は、簡単に追加できます。

于 2013-03-05T15:16:42.980 に答える