CSS Flex-box - Trim box containing long text

Question

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:

This is what I have now

And this is what I want to have:

enter image description here

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

try to adjust flex value on childs http://jsfiddle.net/f98VN/8/ and align-self. But this will need to be retune if text is different http://jsfiddle.net/f98VN/9/. — G-Cyrillus, May 28 '14 at 19:13

G-Cyrillus · Accepted Answer · 2014-06-13T05:46:17.697

2

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

edited Jun 13 '14 at 05:46

answered May 28 '14 at 19:22

G-Cyrillus

101,410
14
105
129

Thanks a lot! Thats the way I wanted it to be. :) – Rob May 28 '14 at 19:25
perfect, note that display:table will shrink/expand to it's content, setting a small width makes it to wrap inline content – G-Cyrillus May 28 '14 at 19:27
hmm, I studied it a little deeper and it's not quite full solution. Because of that width: 1% the content is moved to the side, not center on page. You can clearly see this on Your fiddle example. I will try modify Your code to find fully solution. – Rob May 28 '14 at 19:40
I've had to uncheck acceptation of the answer. Solution is almost good, problem is that whole content moves from center of the page because of that width: 1%. `justify-content: center` "thinks" that middle box has 1% width and not its real width which is much more. :/ I played around with that code and it looks like it simply cannot be done the way I want it. – Rob May 28 '14 at 20:01
@Rob okay, i'm not sure to understand, if i st border and margin auto to flex-parent, i see all 3 boxes in center. Do you have a link where your trouble shows up or is it with a peticular browser ? test here http://codepen.io/gc-nomade/pen/eLycj – G-Cyrillus May 28 '14 at 22:58
@Rob ... hmm i saw a bug in opera, flex has still to mature a bit , try this fix : http://codepen.io/gc-nomade/pen/izKFG wich i dislike. i'll be off for next hours – G-Cyrillus May 28 '14 at 23:18
That bug is in Chrome to, but your magic from fixed version solved this issue. IE still has problems but I think that it is acceptable because IE almost all the time has problems. ;) I need to read about @-moz-document url-prefix() because I didn't know that. Thanks a lot for Your time and help! – Rob May 29 '14 at 07:07
@Rob maybe the option is not to use the flexbox on this one : http://codepen.io/gc-nomade/pen/BiLHd – G-Cyrillus May 29 '14 at 14:15
Yes, that is good choice. I've never before used display: inline-table. Without it my issue wasn't possible to solve other way than with flexbox. With inline-table it is good and more supported way so I will do this that way. Again- thanks a lot for your time, I learned new things. :) – Rob May 29 '14 at 16:02

score 1 · Answer 2 · answered May 28 '14 at 19:18

1

Well, the extra space appears because the whitespace break is a fake effect applied by the browser. What in fact happens, and it's hidden by the browser, is that the word is breaking between its letters, then the extra-space is actually the space that the letters really take.

You can see it by setting the text div to word-break: break-all; http://jsfiddle.net/f98VN/10/

enter image description here

It's not the effect you asked, but at least it doesn't leave extra space.

answered May 28 '14 at 19:18

LcSalazar

16,524
3
37
69

I figured it out that it's the reason of my problem. The thing is that I can't have words broken on letters. @GCyrillus just solved my issue. Thanks for help! – Rob May 28 '14 at 19:22

score -1 · Answer 3 · answered May 28 '14 at 19:10

-1

I got it to appear the way you want using percentages not fixed pixel width,

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

check out this Updated fiddle

answered May 28 '14 at 19:10

DivineChef

1,211
1
10
27

Makes it worse (at least on my screen) – Ali Gajani May 28 '14 at 19:12
Why would you set a fixed width in pixels for something that's flexible? You need to adjust the percentage to make it look better for you. – DivineChef May 28 '14 at 19:21
I've set fixed width on parent just for this fiddle example. In fact I have it on width 100% but it centers on page (also with flex). Text in pink is dynamically modified with JavaScript so one time it will have text: "one" which is for, lets say 50px width, and another time pink div have text "something long" and then it will have bigger width. Thats why I can't set constant width 70%, it must be flexible. @GCyrillus solved issue so You can check it out. Thanks for help. :) – Rob May 28 '14 at 19:29

CSS Flex-box - Trim box containing long text

3 Answers3

Linked