对于长的不间断文本，自动换行不尊重父母的宽度

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 的某个值，second msg 将溢出。

我想要max-width = min(30vw, parent's width)之类的东西

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

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

上查看示例

Answer 1

只需将max-width:100% 设置为.parent，这样就可以尊重.container 的宽度，然后依赖flex，默认情况下你的元素会缩小。也不要忘记元素本身的min-width:0 to enable the element to shrink。

.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 (working example)

如果您需要支持 safari（但仍不支持 IE11），请将 word-wrap:break-word; 替换为 word-break: break-word。请注意，word-break: break-word 是 deprecated，而不是 word-wrap: anywhere。

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

另见：Difference between overflow-wrap and word-break?

Answer 3

只需添加：

word-break: break-all;

在 .msg