是否可以对跨多行的内容进行宽度收缩包装？

Question

如果我有一个包含在框中的元素：

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

display: inline-block做了收缩包装的小把戏。但是，如果由于宽度限制，内容跨越多行，则无法对元素进行收缩换行。

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

有没有办法产生如下所示的预期结果？

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

这是一个显示两种情况的小提琴：http://jsfiddle.net/urLa8jvc/2/和一个解决方案，在这个解决方案中，我在正确的位置手动换行，以显示所需的结果。CSS解决方案是首选，但javascript也是可以接受的。

Answer 1

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

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();
}

Answer 2

向.node类添加一个max-width属性：

.node {
  display: inline-block;
  background: #999;
  padding: 5px;
  max-width: 150px;
  border-radius: 5px;
}

查看您的jsfiddle更新的http://jsfiddle.net/urLa8jvc/4/

Answer 3

将节点div的内容包装在span中，然后使用javascript将它们的宽度设置为span的宽度。

<div class="container">
    <div class="node"><span>Short text</span></div>
</div>
<div class="container">
    <div class="node"><span id="weird">Something that takes up more than one line for real tho</span></div>
</div>
<script>
    $('.node').width(function() {
        var first = $(this).children().first();
        var width = first.width() + 1;
        return width;
    });

    $('.node').each(function(){
        var first = $(this).children().first();
        first.css('display', 'inline-block')
    });
</script>

这是因为跨度是内联元素，所以会尽可能的窄。

小提琴：http://jsfiddle.net/fmsuzo7b/2/

编辑：

虽然这在Chrome中有效，但Firefox似乎处理多行跨度中的文本布局略有不同。为了弥补这一点，我们需要在父div的宽度上增加一个额外的像素。此外，更改父div的宽度会导致内部跨度在Firefox中重新布局，从而缩小其宽度。为了防止这种情况发生，我们将跨度设置为display: inline-block，以便它们现在填充新调整大小的父div的整个宽度。

无论如何，你可能需要稍微修补一下填充，但我怀疑额外的像素是否会被注意到。