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

Question

我正在使用CSS中的flexbox系统，我无法弄清楚如何解决我的问题。

如果我的包含长文本的框，它会断开为两行，则框会增长到可用的全宽，我不想要这样。如果文本在很多行上，那么我希望框增长到最长行的宽度。好吧，我的英语不太好，以至于为什么我有图像来更好地展示我想要实现的目标。

这就是我现在所拥有的：

这就是我想要的：

我在google（和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

Answer 2

好吧，出现额外的空格是因为空格中断是浏览器应用的假效果。实际发生的事情，以及它被浏览器隐藏的是，这个词在它的字母之间断开，然后额外的空间实际上是字母真正占据的空间。

您可以通过将文字div设置为word-break: break-all; http://jsfiddle.net/f98VN/10/

来查看

这不是你问的效果，但至少不会留下额外的空间。

Answer 3

我按照你想要的方式使用不固定像素宽度的百分比来显示

changed width: 550px; to width:70%;

查看此Updated fiddle