javascript - 拆分文本以最小化宽度，同时受 div 上的高度限制

Question

我在包括 stackoverflow 在内的许多论坛上搜索了一个星期，但未能找到答案。

我正在使用 css flexbox 在响应式网站中打印动态菜单项。文本可以很长，如果高度允许，我想将文本拆分成几行，这样它仍然可以垂直放置在我的 div 中，并且可以最小化宽度。

我有一个例子:

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

这是我正在努力完成的链接: http://jsfiddle.net/etL630ew/2/

在顶部是当前结果，在底部我注入(inject)了 brs 来模拟我想做的事情。

任何仅使用 CSS 的答案都很好。如果我不能使用 CSS 来完成，那么任何 js 解决方案也都不错!

谢谢你的时间

普克

Answer 1

从 .text 中删除 flex-shrink: 0

.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>