7

小さな div に表示されているテキスト (overflow:hidden) の最後の表示単語の位置を見つけることは可能ですか?

例えば：

<div style="height: 50px; width: 50px; overflow: hidden;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor 
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et 
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</div>

divコンテナで最後に表示されたWordの位置を計算するには? div133全体を埋めるのが好きです!

4

6 に答える 6

2

@SmokeyPhpの回答に加えて：

まず第一に、それは私を大いに助けた素晴らしい答えでしたが、そこには条件にいくつかの間違いがありました.

第二に、私は jQuery の代わりに jqlite ライブラリを使用しているため、その回答もその分野で非常に役立ちました (彼が使用したすべてのメソッドは jqlite ライブラリの一部でした)。

span または div 内の最後の可視単語を検出することに加えて、私の関数は残りのテキストを "..." に置き換えています。

私が使用しているコードを投稿しています。基本的には@SmokeyPhpが投稿したコードですが、必要に応じて修正されています。他の人がそれから恩恵を受けることを願っています:

function dotdotdot(containersToDotdotdot) {
    function dotdotdotContainers(containers) {
        for (var i = 0; i < containers.length; i++) {
            var cntnr = $jq(containers[i]);
            cntnr.html('<span>' + cntnr.html().replace(/ /g,'</span> <span>') + '</span>');
            var words = Array.prototype.slice.call(cntnr.find("span"), 0).reverse();
            var lastw = null;

            for (var j = 0; j < words.length; j++) {
                var w = $jq(words[j]);
                var wbot = w.height() + w.offset().top;
                var wleft = w.offset().left;
                var wright = wleft + w.width();

                if (wbot <= (cntnr.offset().top + cntnr.height()) && wleft >= (cntnr.offset().left) && wright <= (cntnr.offset().left + cntnr.width())) {
                    lastw = words.length - j - 1;
                    break;
                }
            }

            cntnr.html(lastw === null || lastw === (words.length - 1) ? cntnr.text() : (cntnr.text().split(' ').slice(0, lastw).join(' ') + '...'));
        }
    }

    if (containersToDotdotdot instanceof Array) {
        for (var i = 0; i < containersToDotdotdot.length; i++) {
            dotdotdotContainers($jq(containersToDotdotdot[i]));
        }
    } else {
        dotdotdotContainers($jq(containersToDotdotdot));
    }
}

ご覧のとおり、私の dotdotdot 関数は、dotdotdot に対するクラス/ID の配列、または単一のクラス/ID を取得できます。

$jq は、jQuery の $ を jqlite に置き換えたものです。

ありがとう@SmokeyPhp、jQueryをdotdotdotテキストに必要としない方法を長い間探していましたが、あなたの方法は素晴らしいです。

于 2015-12-03T07:48:50.047 に答える
1

ワーキングデモ

ここから回答を借りて、少し調整しました。

function countVisibleCharacters(element) {
    var text = element.firstChild.nodeValue;
    var r = 0;

    element.removeChild(element.firstChild);

    for(var i = 0; i < text.length; i++) {
        var newNode = document.createElement('span');
        newNode.appendChild(document.createTextNode(text.charAt(i)));
        element.appendChild(newNode);

        if(newNode.offsetLeft < element.offsetWidth) {
            r++;
        }
    }

    return r;
}

var c = countVisibleCharacters(document.getElementsByTagName('div')[0]);

var str = document.getElementById('myDiv');
str = str.textContent;
str = str.substring(0, c);
str = str.substr(str.trim().lastIndexOf(" ")+1);
alert(str);
于 2013-10-14T09:33:54.570 に答える
0

こんにちは、あなたの仕事は以下のように完了しました...

function Searchinput()
{
var str = "This is a test "; // Content of the div
var lastWord = str.substr(str.trim().lastIndexOf(" ")+1);
  alert(lastWord)
}

http://jsbin.com/UWUTar/1/edit

于 2013-10-14T09:09:33.160 に答える