自动换行不考虑长非中断文本的父级宽度

Question

.container {
/* 
Container's width can be dynamically resized. 
I put width = 300px in the example to demonstrate a case 
where container's width couldn't hold second msg 
*/
width: 300px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 1em;
background-color: blue;
}
.parent{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
padding:1em;
background-color:red;
box-sizing:border-box;
margin-bottom: 1em;
}
.name{
background-color:mistyrose;
width: 70px;
padding: 1em;
}
.msg{
background-color:powderblue;
max-width: 30vw;
padding:.5em;
word-wrap:break-word;
}

<div class='container'>
<div class="parent">
<div class="name">
David
</div>
<div class="msg">
How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? 
</div>
</div>
<div class="parent">
<div class="name">
Hannah
</div>
<div class="msg">
somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething
</div>
</div>
</div>

理想情况下，我希望每个msg的最大宽度为30vw，但同时尊重父级的宽度。第一行行为正确，但第二行行为不正确。如果父级的宽度调整为小于 30vw 的值，则第二个消息将溢出。

我想要类似max-width = min(30vw, parent's width)

注意：容器的宽度可以动态调整大小。我在示例中放置了宽度= 300px，以演示容器无法容纳第二个消息的情况，该消息以某种方式具有宽度=最大宽度= 30vw。

您还可以在http://jsfiddle.net/vbj10x4k/231/

Answer 1

只需将max-width:100%设置为.parent，以便这个尊重.container的宽度，然后依靠flex，默认情况下您的元素将缩小。另外不要忘记min-width:0元素本身以使元素缩小。

.container {
width: 300px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 1em;
background-color: blue;
}
.parent{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
padding:1em;
background-color:red;
box-sizing:border-box;
margin-bottom: 1em;
max-width:100%; /*Added this */
}
.name{
background-color:mistyrose;
width: 70px;
padding: 1em;
}
.msg{
background-color:powderblue;
max-width:30vw;
min-width:0; /*addedd this*/
padding:.5em;
word-wrap:break-word;
}

<div class='container'>
<div class="parent">
<div class="name">
David
</div>
<div class="msg">
How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? 
</div>
</div>
<div class="parent">
<div class="name">
Hannah
</div>
<div class="msg">
somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething
</div>
</div>
</div>

Answer 2

如果您不需要支持 IE11 或 safari，一个简单的解决方案是word-wrap:break-word;使用word-wrap: anywhere(工作示例(

如果您需要支持 safari(但仍然不支持 IE11(，请将word-wrap:break-word;替换为word-break: break-word。请注意，word-break: break-word已被弃用，取而代之的是word-wrap: anywhere。

我还建议将其更常用的别名切换word-wrap：overflow-wrap。在搜索词中使用时会更有效。

另请参阅：溢出换行和分词之间的区别？

Answer 3

只需添加：

word-break: break-all;

在 。.msg