javascript - 是否可以横向收缩包裹超过一行的内容？

Question

如果我有一个元素包含在一个盒子里:

+-------- box --------+
| *------------*      |
| | small text |      |
| *------------*      |
+---------------------+

display: inline-block 完成了收缩包装的技巧。但是，如果内容由于宽度受限而跨越多行，则无法收缩包裹元素。

+-------- box --------+
| *-----------------* |
| | this does not   | |
| | shrink          | |
| | appropriately   | |
| *-----------------* |
+---------------------+

是否有任何方法可以产生如下所示的预期结果？

+-------- box --------+
| *---------------*   |
| | this does not |   |
| | shrink        |   |
| | appropriately |   |
| *---------------*   |
+---------------------+

这是显示这两种情况的 fiddle :http://jsfiddle.net/urLa8jvc/2/和一个解决方案，我在正确的地方手动断线以显示所需的结果。 CSS 解决方案是首选，但 javascript 也是可以接受的。

Answer 1

我真的更喜欢 CSS 的解决方案，但现在我已经使用 javascript 编写了这个“技巧”:http://jsfiddle.net/86khx8kf/2/

var nodes = document.querySelectorAll(".node");
for (var nidx = 0; nidx < nodes.length; nidx++) {
    var node = nodes[nidx];
    node.innerHTML = node.innerHTML.split(" ").map(function (word) {
        return "<span>" + word + "</span>";
    }).join(" ");
    var spans = node.querySelectorAll("span");
    var offsetLeft = -Number.MAX_VALUE;
    for (var sidx = 0; sidx < spans.length; sidx++) {
        var span = spans[sidx];
        if (span.offsetLeft <= offsetLeft) {
            node.insertBefore(document.createElement("br"), span);
        }
        offsetLeft = span.offsetLeft;
        span.outerHTML = span.innerHTML;
    }
    node.normalize();
}