html - CSS Flex-box - 包含长文本的修剪框

Question

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

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

这就是我现在拥有的:

这就是我想要的:

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

是否可以做我想做的事，如果可以，我该如何实现？如果没有，您有什么建议？

代码:

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;
}

Answer 1

您可以使用以下命令将中间容器缩小到最长的单词:display:table;width:1%; DEMO 或使用inline-block和inline-table，删除flexmodel: DEMO (this is it)

为了将单词放在一起，您可以在要保留在同一行的单词之间使用不间断字符   : DEMO

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