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/

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

2 个答案: