2

ここでフィドルを作成しました：http://jsfiddle.net/mupersan82/JYuSY/

複数行の省略記号関数:

$(function() {
var ellipsisText = $('.multilineEllipseText');
var textContainer = $('.incidentCellBottomRight').height();
while ($(ellipsisText).outerHeight(true) > textContainer) {
    $(ellipsisText).text(function(index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
    });
}

});

関数はここから取得されます:幅と高さの固定 div 内に省略記号が追加されたクロス ブラウザーの複数行のテキスト オーバーフロー?

関数は複数行のコンテンツに対して機能しますが、コンテンツを端まで拡張することはできません。単一行のコンテンツでは、省略記号は 1 つの単語のみの後に追加されます。

親 div の最大高さである 100px までのテキストを許可する必要があります。

4

6 に答える 6

11

コードには次のものがあります。

var $ellipsisText = $('.multilineEllipseText');

これにより、すべての.multilineEllipseText要素が選択されます。.outerHeight(true)ただし、後で使用します。これは、指定されたセットのみの最初の要素の高さを返します。

したがって、最初の要素では機能しますが、その後の各要素では、間違った高さ (最初のもの) と比較しています。

これを修正する方法は次のとおりです。

var textContainerHeight= $('.incidentCellBottomRight').height();

$('.multilineEllipseText').each(function () {
  var $ellipsisText = $(this);

  while ($ellipsisText.outerHeight(true) > textContainerHeight) {
    $ellipsisText.text(function(index, text) {
      return text.replace(/\W*\s(\S)*$/, '...');
    });
  }
});

デモ: http://jsfiddle.net/JYuSY/1/

于 2012-11-16T11:16:44.260 に答える
3

これがお役に立てば幸いです。（dotdotdot）

http://dotdotdot.frebsite.nl/

于 2012-11-16T11:02:23.093 に答える
0

この回答が非常に古いことは知っていますが、非常に関連性があるため、同様の問題と解決策を共有すると思いました。

私はレスポンシブ サイトを持っており、美的な理由から、3 行後に切り取る必要のある段落がいくつかあり、クリックすると残りのテキストが本質的に表示されるリンクを追加する必要があります。

したがって、画面サイズが変わるたびにページを更新するのではなく、すべてのテキストを手元に置いておくことが重要です (これがレスポンシブの目的です)。

とにかく、これが私のエレガントなソリューションです：

/** 
  * @name   - Ellipsify
  * @desc   - trims and adds ellipsis to element when element text height is greater than element height
  * @param  - [required] (string)identity - string containing jquery selector used to create object group (array) based on selector
  * @function : _init - calculates each element and determines need for ellipsis, then truncates text as needed
*/
var Ellipsify = function(identity) {
    if (identity) {
        this.identity = identity;
        this.group = $(this.identity);
        if (this.group.length > 0) {
            this._init();
        }
    }
};
Ellipsify.prototype = {
    _init : function() {
        var that = this;
        that.group.each(function() {
            if ($(this).children('.hidden').length > 0) {
                $(this).children(':not(.hidden)').text($(this).children(':not(.hidden)').text().replace('...',' ') + $(this).children('.hidden').text());
                $(this).children('.hidden').remove();
            }
            if ($(this).children().outerHeight() > $(this).innerHeight()) {
                $(this).append('<span class="hidden"></span>');
                while ($(this).children(':not(.hidden)').outerHeight() > $(this).innerHeight()) {
                    var paragraph = $(this).children(':not(.hidden)').text().replace('...', '');
                    var lastword = paragraph.substring(paragraph.lastIndexOf(' '));
                    $(this).children(':not(.hidden)').text(paragraph.substring(0, paragraph.lastIndexOf(' ')) + '...');
                    $(this).children('.hidden').text(lastword + $(this).children('.hidden').text());
                }
            }
        });
    },
};

HTML は次のようになります。

<p><span>Big paragraph of text goes here.</span></p>

そしてCSSは単純です：

p {
    font-size:1em;
    line-height:1.5em;
    height:4.5em;
    width:100%;
    overflow:hidden;
}
.hidden {
    display:none;
}
于 2014-10-06T16:24:05.130 に答える
0

省略記号を使用したフルワードの複数行のワードラップ: http://jsfiddle.net/tdpLdqpo/4/

JSFiddle をチェックしてください。次の 2 つのプロパティを設定するだけです。

var maxWidth = 300;
var maxLines = 3;
于 2015-06-19T21:09:42.770 に答える