7

是否可以找到小 div 中显示的文本（溢出：隐藏）的最后一个可见单词的位置？

例如：

<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 容器中的位置？ 我喜欢填满整个div133！

4

6 回答 6

6

JSFiddle在这里：http: //jsfiddle.net/SmokeyPHP/NQLcc/1/

HTML：

<div id="txt">
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>

CSS：

#txt {
    width: 75px;
    height: 75px;
    border: 1px solid #F00;
    overflow: hidden;
}

JS：

var cntnr = $("#txt");
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 i=0,c=words.length;i<c;i++)
{
    var w = $(words[i]);
    var wbot = w.height() + w.offset().top;
    var wleft = w.offset().left;
    var wright = wleft+w.width();
    if(wbot <= cntnr.height() && wleft <= cntnr.width() && wright <= cntnr.width())
    {
        lastw = w.text();
        break;
    }
}
cntnr.html(cntnr.text());
alert(lastw);

JS 可能会被缩短，但我在写作和思考的同时把它留下了......本质上，你将所有单词包装在一个跨度中，然后在跨度中向后循环，看看它们的边界是否在容器，一旦我们找到一个确实位于容器边界内的跨度，在将文本返回为纯文本（删除临时跨度）之后，跳出循环并返回该单词。

于 2013-10-14T09:31:49.763 回答
2

除了@SmokeyPhp 答案：

首先，这是一个很好的答案，对我有很大帮助，但是那里的条件有一些错误。

其次，我正在使用 jqlite 库而不是 jQuery，因此该答案在该领域也非常有帮助（他使用的所有方法都是 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 函数可以将类/id 的数组获取到 dotdotdot，或单个类/id。

$jq 是 jQuery 的 $ 的 jqlite 替代品。

感谢@SmokeyPhp，我找了很长时间不需要jQuery来点点文本的方法，你的方法太棒了。

于 2015-12-03T07:48:50.047 回答
1

是的，可以检测使用 Javascript 显示的最后一个单词。

不幸的是，我没有时间编写可以执行此操作的代码，但是，我将解释该算法。

如果您有一个 50x50 的框，并且您想检测最后一个可见单词是什么，请执行以下操作：

  1. 创建一个宽度为 50 像素但高度没有限制的 div 屏幕外。对于这个演示，我们将这个 div 称为 clonedDiv。
  2. 获取原始 div 中的字符串并将它的第一个单词插入到 clonedDiv 中。
  3. 检查 clonedDiv 的高度。
  4. 应用这个逻辑：如果它 <= 50px 然后添加下一个单词并重试。如果它大于 50px 高，那么这就是导致溢出发生的单词。您的答案将是前一个词。

请注意，上面的算法使用蛮力方法来查找单词。该算法基本上是一次添加一个单词，直到找到导致溢出的单词。您可以通过使用二进制搜索算法的变体来改进这一点，它将算法从 O(n) 改进为 O(log(n))。

于 2013-10-14T09:36:48.527 回答
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 回答
1

一种可能的解决方案：

var $div = $('div'),
    size = [$div.width(), $div.height()],
    words = $.trim($div.text()).split(/\s+/),
    word;

for (var i = 0, len = words.length; i < len; i++) {
    var $clone = $div.clone().text(words.join(' ')).insertAfter($div);
    $clone.contents().wrap('<span />');
    var $child = $clone.children('span');

    if ($child.width() <= size[0] && $child.height() <= size[1]) {
        word = words.pop();
        $clone.remove();
        break;
    }
    words.pop();
    $clone.remove();
}

console.log(word);

演示：http: //jsfiddle.net/bcn78/

于 2013-10-14T09:34:36.867 回答
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 回答