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，但是现在我已经写了这个＆＃34; hack＆＃34;这可以使用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();
}

Answer 2

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

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

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

Answer 3

在一个范围中包装节点div的内容，然后使用javascript将其宽度设置为范围的宽度。

<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的整个宽度。

无论如何，你可能需要略微修补填充，但我怀疑额外的像素是否会引人注意。

是否有可能以宽度方式收缩包装跨越多行的内容？

3 个答案: