在我的网站上，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;
}
最佳答案
您需要使用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 换行符，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30158498/