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

您需要使用0代替auto：

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

请参阅 this JSFiddle ，或运行下面的代码段。

＆＃13;

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

＆＃13;

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

＆＃13;

进一步阅读：

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

Answer 2

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

destroy_matrix()

文本溢出容器

2 个答案: