Question

我正在构建一个将内容拆分为列的脚本。这是脚本应该如何工作：

我有一系列固定大小的div，溢出关闭
我将内容写入第一个div
使用Javascript我检测内容溢出的位置。
我删除了从那一点到结尾的内容
我将此内容写入下一个div
然后我执行步骤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;
        }
    }
});

jsfiddle：http://jsfiddle.net/y53yen02/

Javascript检测溢出的元素

1 个答案: