CSS - 设置自动换行的动态大小容器

Question

我有获取文本的长行正确破裂，在我工作的一个聊天功能包的一个问题。下面的HTML是相关集嵌套元素的，但饼干的关键是与.chat__messages__item和.chat__messages__body（下面整个块是被设定为​​的元素的内部，因此它被所有旨在是窗口宽度响应）。

首先，这里的HTML/CSS ...

<style> 
    .chat__messages__inner{ 
     display: table; 
     height: 100%; 
     width: 100%;  
    } 

    .chat__messages__list { 
     display: table-cell; 
     vertical-align: bottom; 
     margin: 0; 
     padding: 10px 20px 0; 
     list-style-type: none; 
    } 

    .chat__messages__item { 
     position: relative; 
     margin-bottom: 10px; 
     padding: 8px 10px; 
     background-color: #D8F2FD; 
     clear: both; 
    } 


    <!-- THIS STYLE HAS NO AFFECT UNLESS I SET A MAX-WIDTH ON .chat__messages__item --> 
    .chat__messages__body { 
     word-wrap: break-word; 
    } 
</style> 

<div class='chat__messages__inner'> 
    <ul class='chat__messages__list'> 
     <li class='chat__messages__item'> 
      <div class='chat__messages__body'> 
       hereisaverylonglineoftextthatiwouldliketobreakandwrap 
      </div> 
     </li> 
     <li class='chat__messages__item'> 
      <div class='chat__messages__body'> 
       here is a long sentence that will wrap and behave correctly 
      </div> 
     </li> 
    </ul> 
</div> 

期望的行为是<div>和<li>包含文本应不宽/比文本本身较高，但这些元素也应该从来没有比他们的父母宽 - 所以有几句话，他们可能是150px宽，但如果容器缩小到小于150px，这些元素也将开始缩小，并且文本内部将开始包装。

与此代码打球，我能够通过设置样式.chat__messages__body包括word-wrap: break-word，然后设置父.chat__messages__item包括max-width: 300px（以上省略）去接近期望的结果。虽然长字会打破和包裹，只生产我的全屏窗口上正确的结果 - 如果窗口大小或低于全开始了，这个词还是包装，但股利超过300px宽（我试过将此设置为百分比，但这不起作用，这个词实际上是解开的）。

我上面包含的长句子确实如我所愿 - 其父母<div>和<li>都是文本的大小，并且如果窗口缩小以便这些元素的宽度比父母的宽度大（所有这些都可以扩展到​​祖先），它们也开始缩小，并且文本包装在空间上。

用简单的英语，我想长字的容器永远比100％的宽度更宽的祖先，它需要与窗口动态调整，沿途破碎，包装。

我不是一个真正的CSS /设计专家，这是我从别人那里继承代码，我一直是这样战斗的时间太长了......任何指导，将不胜感激。

Answer 1

好了，原来做的事情是设置.chat__messages__inner和.chat__messages__list到display: inline-block与width: 100%，并.chat__messages__item需要有max-width: 100%。

Answer 2

Here is a question you could check out。其中一个答案建议我会尝试，即使用<wbr>标签来创建分词机会。 You can read about it here。