文本溢出容器时的 HTML/CSS 换行符答案

【问题标题】：HTML/CSS line break when text overflows container文本溢出容器时的 HTML/CSS 换行符
【发布时间】：2015-05-11 01:36:18
【问题描述】：

在我的网站上，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;
}

【问题讨论】：

标签： html css overflow containers

【解决方案1】：

您需要使用0 而不是auto：

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

查看this JSFiddle，或运行下面的代码sn-p。

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

【讨论】：

【解决方案2】：

我不熟悉 css flex 位，但删除这两行会使文本按您的意愿流动。

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

【讨论】：