html - 尽管使用显示 :inline-block and setting a max-width，但包装文本扩展了一个 div

Question

应该很容易解决的简单问题，但我找不到解决方案。

我正在尝试通过设置 max-width 并使用 display: inline-block 将 div“收缩包裹”到它的内容中，这似乎是标准方法。

但是，每当一个单词导致文本换行(即它已达到 max-width 阈值)时，空白将显示在文本本应的位置，即使它实际上并不存在。

这jsfiddle演示我在说什么。

我到处搜索以找到解决方案，我找到的最接近的是 this ，虽然我真的不想走那条路。

真的没有一个简单、干净、纯 CSS 的解决方案吗？

Answer 1

一个 jQuery 辅助解决方案

仅靠 CSS 无法满足您的需求，但使用 jQuery 则相对容易。

因为内联元素中的 #mySpan，它的宽度将恰好是任何换行前文本的宽度。

使用 jQuery 探测内部 span 的长度，并使用该值设置父元素的宽度。

根据父 block 的最大长度和文本中单词长度的分布，您可能仍然会在 block 参差不齐的右边缘看到一些难看的空白。

无论如何，这是一个需要牢记的有用技巧。

$('#myDiv').innerWidth($('#mySpan').innerWidth());

#myDiv {
    background-color: red;
    max-width: 410px;
}
#mySpan {
    background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
    <span id="mySpan">Here is some text. Why does a wrapped word create space and where the word would have been on the previous line?</span>
</div>