CSS Flex-box - 包含长文本的修剪框 [英] CSS Flex-box - Trim box containing long text

问题描述

如果我的文本框中有长文本，那么中断到两行，框增长到全宽可用，我不想这样。如果文本是在很多行上，那么我希望框长到最长的一行的宽度。那么，我的英语不是那么好，这就是为什么我有图像，以更好地显示我想要达到什么。

这是我现在所拥有的：

这就是我想要的：

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

是否可以做我想做的事，如果是的话，我该如何做到？如果没有，你有什么建议？

代码：

$ b

HTML p>

 < div class =flex-parent> 
< div class =item1>< / div> 
< div class =item2>文字在这里< / div> 
< div class =item1>< / div> 
< / div> 
  

CSS

  .flex-parent {
 display：flex; 
 justify-content：center; 
 width：550px; / *它具有整个页面的宽度，在小提琴中，我将其改为固定* / 
 align-items：center; 
} 
 
 .item1 {
 background：red; 
 height：100px; / *它有不变的宽度* / 
宽度：100px; 
} 
 
 .item2 {/ *它的宽度是流畅的，取决于其中由JS修改的文本* / 
 background：pink; 
 font-size：100px; 
 
  

解决方案

最长的单词使用： display：table; width：1％; DEMO ，或者使用 inline-block 和 inline-table flexmodel： DEMO （就是这样） b
$ b

为了保持单词的一致性，你可以在单词之间使用一个非中断字符& nbsp; 你想保留在同一行： DEMO

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

I'm playing with flexbox system in CSS and I can't figure out how to solve my problem.

If I have box with long text, which breaks to two lines, box grows to full width available and I don't want that. If text is on many lines then I want box to grow to width of the longest line. Well, my english is not so good that's why I have images to better show what I want to achieve.

This is what I have now:

And this is what I want to have:

I looked for ready solution in google (and stackoverflow) but without luck. I prepared also JSFiddle for that: http://jsfiddle.net/f98VN/4/

Is it possible to do what I want and if yes then how can I achieve that? If not, what are your suggestions?

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

解决方案

You may shrink middle container to the longest word using :display:table;width:1%; DEMO or use inline-block and inline-table, dropping the flexmodel : DEMO (this is it)

To keep words together you may use a non breaking character   in between words you want to keep aside on same line : DEMO

Edit: Above demos works in some browsers. In Chrome and Opera content moves to the side of the page. Fixed version: http://codepen.io/gc-nomade/pen/izKFG

这篇关于CSS Flex-box - 包含长文本的修剪框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！