Split text to minimize width while constrained by height on a div

Question

I have been searching for a week on a lot of forums including stackoverflow and failed finding an answer.

I'm using css flexbox to print dynamic menu items in a responsive website. The text can be long, and if the height enables it, I would like to split the text on several rows, in a way that it will still fit vertically in my div, and that will minimize the width.

I have an example :

HTML

<div class="wrapper">
    <div class="text">
        Hello pouc nice to meet you!
    </div>
    <div class="text">
        It would be a great pleasure to help you ;-)
    </div>
    <div class="text">
        Seriously, if ever you had an idea I would be very glad!
    </div>
</div>

CSS

.wrapper {
    display: flex;
    flex-direction: row;
    overflow-x: auto;

    height: 80px;
    width: 400px;
}

.text {
    flex-shrink: 0;

    background: pink;
    margin: 2vh;
}

Here is a link of what I'm trying to accomplish : http://jsfiddle.net/etL630ew/2/

At the top the current result, and at the bottom I injected brs to simulate what I would like to do.

Any answer with CSS only would be great. If I can't do it using CSS, then any js solution would be good too!

Thanks for your time

Pouc

Answer 1

Remove the flex-shrink: 0 from .text

 .wrapper { display: flex; flex-direction: row; overflow-x: auto; height: 80px; width: 400px; } .text { background: pink; margin: 2vh; } 

 <div class="wrapper"> <div class="text"> Hello pouc nice to meet you! </div> <div class="text"> It would be a great pleasure to help you ;-) </div> <div class="text"> Seriously, if ever you had an idea I would be very glad! </div> </div> 

Answer 2

you could also simply define your width of each text block

.finiteWidth{
    width:30%;
    white-space:wrap;
}

http://jsfiddle.net/etL630ew/2/