CSS Flex-box - 包含长文本的修剪框[重复]

我正在使用 CSS 中的 Flexbox 系统，但我不知道如何解决我的问题。

如果我有一个带有长文本的框，它会分成两行，框会增长到可用的全宽，但我不希望这样。如果文本位于多行上，那么我希望框增长到最长行的宽度。嗯，我的英语不太好，这就是为什么我有图像来更好地展示我想要实现的目标。

这就是我现在所拥有的：

这就是我想要的：

我在谷歌（和 stackoverflow）中寻找现成的解决方案，但没有运气。 我还为此准备了 JSFiddle：http://jsfiddle.net/f98VN/4/ http://jsfiddle.net/f98VN/4/

是否可以做我想做的事，如果可以，那么我怎样才能实现这一目标？如果没有，您有什么建议？

Code:

HTML

<div class="flex-parent">
    <div class="item1"></div>
    <div class="item2">text is here</div>
    <div class="item1"></div>
</div>

CSS

.flex-parent {
    display: flex;
    justify-content: center;
    width: 550px; /* it has width of the whole page, in fiddle I changed it to fixed */
    align-items: center;
}

.item1 {
    background: red;
    height: 100px; /* it has constant width */
    width: 100px;
}

.item2 { /* it's width is fluid, depends on text inside which is modified by JS */
    background: pink;
    font-size: 100px;
}

您可以使用以下命令将中间容器缩小到最长的单词：display:table;width:1%; DEMO http://jsfiddle.net/f98VN/11/ or use inline-block and inline-table，删除 flexmodel ：DEMO （就是这个） http://codepen.io/gc-nomade/pen/BiLHd

为了将单词保持在一起，您可以使用不间断字符 在您想要保留在同一行的单词之间：DEMO http://jsfiddle.net/f98VN/12/

编辑： 以上演示适用于某些浏览器。在 Chrome 和 Opera 中，内容移动到页面的一侧。 固定版本：http://codepen.io/gc-nomade/pen/izKFG http://codepen.io/gc-nomade/pen/izKFG