弹性:文字太长时换行 [英] Flex: When text too long break into new line

问题描述

我在考虑是否可以使用CSS flexbox 来实现关注.

I was thinking if it is possible to achieve following using css flexbox.

在布局中，原始位置有2 div彼此相邻.左侧包含一组图标，并且具有固定的宽度.右侧包含文本，该文本可能会很长.

In the layout, there are originaly 2 div next to each other. Left one contains group of icons and has a fixed width. Right one contains text, which can be potentially quite long.

是否有一种方法，如何仅使用 css(尤其是flexbox)，使得文本太长时，div会换行(在第一个div下)?

Is there a way, how to make using only css (especially flexbox), that when the text is too long, the div will break onto the new line (under first div)?

检查以下图像.

推荐答案

您可以通过创建具有display: flex;和flex-wrap: wrap;的容器来做到这一点.然后给溢出文本一个flex-grow: 1;

You can do this by creating a container with display: flex;, and flex-wrap: wrap;. Then give the overflow text a flex-grow: 1;

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.fixed-width {
  width: 200px;
  border: 1px solid red;
}

.fixed-width,
.overflow-text {
  display: flex;
  justify-content: space-around;
}

.overflow-text {
  flex-grow: 1;
  border: 1px solid red;
}

<div class="container">
  <div class="fixed-width">
    <p>Hi</p>
    <p>Hi</p>
    <p>Hi</p>
    <p>Hi</p>
  </div>
  <div class="overflow-text"><p>This is some text that is really long.</p></div>
</div>

JSFiddle

这篇关于弹性:文字太长时换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！