Javascript检测溢出元素

Question

我正在构建一个将内容分成列的脚本。脚本应该是这样工作的：

1. 我有一系列固定大小的div关闭溢出
2. 我将内容写入第一个div中。
3. 使用Javascript，我可以检测内容溢出的位置。
4. 我从那一点到最后把内容删掉了。
5. 我将此内容写入下一个div。
6. 然后，我执行步骤3-6，直到内容不再溢出。

这在理论上是很棒的，但我不知道如何检测哪个元素在div中溢出。

这个是可能的吗？

Answer 1

用javascript代码中断行是不好的。使用CSS的更快、更可靠。

但是如果你真的需要的话，我想帮你写下一段代码。

HTML

<div>abcdefg hijklmnop qrstuvwxyz abcdefg hijklmnop qrstuvwxyz abcdefg hijklmnop qrstuvwxyz abcdefg hijklmnop qrstuvwxyz abcdefg hijklmnop qrstuvwxyz abcdefg hijklmnop qrstuvwxyz abcdefg hijklmnop qrstuvwxyz abcdefg hijklmnop qrstuvwxyz abcdefg hijklmnop qrstuvwxyz abcdefg hijklmnop qrstuvwxyz abcdefg hijklmnop qrstuvwxyz abcdefg hijklmnop qrstuvwxyz </div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

div {
    width: 400px;
    height: 20px;
    overflow: hidden;
    border: 1px solid #000;
}
span {
    white-space: nowrap;
}

带jQuery的Javascript

var restText = "";
$("div").each(function() {
    var el = $(this), w = el.width(), baseText = el.text(), tbox;
    if (baseText === "") {
        baseText = restText;
    }
    el.html("<span>"+baseText+"</span>");
    tbox = el.children("span");
    for (var i = baseText.length; i >= 0; i--) {
        if (tbox.width() > w) {
            tbox.text(baseText.substring(0, i-1));
        } else {
            restText = baseText.substring(i);
            break;
        }
    }
});

小提琴手：http://jsfiddle.net/y53yen02/