即使使用容器，我也不知道如何做到这一点。内联容器的背景将缩小到每行的大小，内联块容器将就像块元素一样......浮动似乎也不起作用。
Example:
<div style="width:250px;position:absolute;left:50%;top:50%;margin-left:-100px;border:2px solid #0000ff;">
<div style="display:inline-block;border:2px solid #ff0000;">
<p style="display:inline;background: #00ff00;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
http://codepen.io/anon/pen/zxKEBY http://codepen.io/anon/pen/zxKEBY
您可以看到内联块容器（红色边框）仍然填充整个容器（蓝色边框）的宽度。
有没有办法使内联块容器仅与内联元素的最长行一样宽，而无需显式设置宽度？
我已经研究这个问题很长一段时间了，试图弄清楚发生了什么，因为这对我来说非常有趣。这就是我的结论：
正如您所看到的，文本实际上已经跑到了边缘，但是通过调用inline它只是呈现出容器应该更小的错觉，因为它迫使这个词consectetr到下一行。我注意到了一些事情（我删除了内联 CSS 并将其添加到 JsFiddle 的 CSS 部分以获得更好的可视性）：
原始代码： 原版小提琴 http://jsfiddle.net/jLts3py5/7/
1.设置时p to inline-block or inline并添加word-break: break-all你可以看到这个词consectetr完美贴合盒子，位于边缘上方：
FIDDLE 1 - 内联块 http://jsfiddle.net/jLts3py5/4/
FIDDLE 2 - 内联 http://jsfiddle.net/jLts3py5/3/
2.如果您使用原始代码并更改p的父母div to inline代替inline-block您可以看到红色边框包围了文本，但它没有包围容器，而是包围了文本字符串，甚至破坏了句子所在的位置：
FIDDLE 3 - 父内联 http://jsfiddle.net/jLts3py5/5/
3.最后，如果您要添加换行符，结果将如您所料：
FIDDLE 4 - 换行 http://jsfiddle.net/jLts3py5/6/
所以我的最终结论是，虽然看起来字符串被分成了两个不同的行并且小于它的父级宽度，但这只是一种幻觉，它实际上仍然占据了它的父级的整个宽度，除非<br/>标签专门告诉它在哪里断开队列。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
