HTML/CSS 文本溢出容器时换行

Question

在我的网站上，Lorem Ipsum 文本溢出了容器。如何在文本到达容器边界时自动添加换行符。

我创建了 this JSFiddle 来演示我的问题。

HTML:

<body>
    <div id="wrapper">
        <div id="content">      
            <div class="flex">
                <div class="flexchild">
                    <img src="img.jpg" width="200"></img>
                </div>
                <div class="flexchild">
                    <p>
                       Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>

CSS

body,html {
  background: #fff;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}

#wrapper{
  background: #ccc;
  height: 100%;
}

.flex {
  width: 100%;
  height: 340px;
  display: -webkit-box;
  display: flex;
}

.flexchild {
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto;
  overflow: auto;
  display: block;
}

Answer 1

我不熟悉 css flex 位，但是删除这两行可以让文本按你想要的方式排列。

-webkit-flex: 1 0 auto;
flex: 1 0 auto;

Answer 2

您需要使用 0 而不是 auto:

.flexchild {
  -webkit-flex: 1 0 0;
  flex: 1 0 0;
  overflow: auto;
  display: block;
}

参见this JSFiddle，或运行下面的代码片段。

body,
html {
  background: #fff;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}
#wrapper {
  background: #ccc;
  height: 100%;
}
.flex {
  width: 100%;
  height: 340px;
  display: -webkit-box;
  display: flex;
}
.flexchild {
  -webkit-flex: 1 0 0;
  flex: 1 0 0;
  overflow: auto;
  display: block;
}

<body>
  <div id="wrapper">
    <div id="content">
      <div class="flex">
        <div class="flexchild">
          <img src="http://www.engraversnetwork.com/files/placeholder.jpg" width="200"></img>
        </div>
        <div class="flexchild">
          <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
    </div>
  </div>
</body>

进一步阅读：

MDN Documentation for flex-basis, the third parameter of flex

HTML/CSS 文本溢出容器时换行

HTML/CSS line break when text overflows container

html

css

containers

overflow