如何在换行时让内联块文本元素具有正确的宽度？

Question

给定一系列内嵌块项目，包含在灵活宽度列中，我需要根据实际宽度概述每个项目。

主要考虑因素是：

• 根据列的宽度
包装文本
• 边界应该尽可能地倒塌。换句话说，它应该拥抱文本的最右侧。

示例 - 更正

+--flexible width container --+
|                             |
|+-------+                    |
||hello  |                    |
||goodbye|                    |
|+-------+                    |
|                             |
|+---------------+            |
||la da de da bla|            |
||hello          |            |
|+---------------+            |
+-----------------------------+

示例 - 错误

+---- flexible width container ----+
|                                  |
|+--------------------------------+|
||Hello goodbye                   ||
||super_long_word_gets_wrapped    ||
|+--------------------------------+|
+----------------------------------+

重要提示 看看当一个长词被包裹时，边界会被推到最后。这是因为如果单词没有被包装，则text元素被认为是宽度。

见小提琴： http://jsfiddle.net/kvLkxf21/1/

同样值得注意的是，以下内容是不可接受的，因为在Firefox中，边框不会绕过整个元素，它会创建多个框，每行一个。

http://jsfiddle.net/kvLkxf21/8/

<div>
    <p>hello hello</p>
    <p>hello hello, how12345</p>
    <p>goodbye</p>
</div>


div {
    width:120px;    
}

p {
    display: inline-block;
    outline: 2px solid red;
}