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

Answer 2

嗯，额外的空格出现是因为空格分隔符是浏览器应用的假效果。实际上发生的情况是，它被浏览器隐藏了，是单词在其字母之间中断，然后多余的空格实际上是字母真正占用的空间。

你可以通过将文本div设置为word-break: break-all;http://jsfiddle.net/f98VN/10/来查看

不是你问的效果，但至少不会留下多余的空间。

Answer 3

我让它以你想要的方式出现，使用百分比而不是固定像素宽度，

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

看看这个Updated fiddle