CSS - ダイナミックサイジングコンテナ内でワードラップを設定する

Question

私が働いているチャット機能を正しく破棄して折り返すために長い行のテキストを取得する際に問題が発生しました。下のHTMLはネストされた要素の関連セットですが、ビスケットの要点は.chat__messages__itemと.chat__messages__bodyです（下のブロック全体が​​に設定された要素の内部にあるため、すべてがウィンドウ幅に対応しています）。 ）。

まず第一に、ここではHTML/CSSは、望ましい行動がテキストを含む<div>と<li>がテキスト自体よりも広くない/背の高いする必要がありますが、それらの要素もなければならないことである

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

...です親よりも広いことはありません。つまり、いくつかの言葉では150ピクセル幅ですが、コンテナが150ピクセル未満に縮小されると、これらの要素も縮小し始め、内部のテキストが折り返しを開始します。このコードで遊ぶ

は、私がword-wrap: break-word、その後max-width: 300px（上記省略）を含むように親.chat__messages__itemの設定を含めること.chat__messages__bodyのスタイルを設定することで、近く望ましい結果を得ることができました。長い単語は改行して折り返しますが、フルスクリーンのウィンドウでは正しい結果しか得られませんでした。ウィンドウのサイズが変更された場合や、フルで始まっていない場合でも、単語はまだ折り返されますが、divは300ピクセル幅ですこれをパーセンテージとして設定しますが、うまくいかない場合は、単語は実際に展開されません）。

上記の長い文章は、私が望むものと全く同じです - その親<div>と<li>は両方ともテキストのサイズであり、これらの要素の幅が両親よりも大きくなるようにウィンドウが縮小される場合それらはすべて祖先の​​にスケールされます）、それらも縮小し始め、テキストはスペースで囲みます。

普通の英語では、長い単語のコンテナが100％幅の祖先より広くならないようにしたいと思います。ウィンドウに合わせて動的にサイズを変更し、途中で折り返して折り返す必要があります。

私は実際にはCSS /デザインエキスパートではありません。これは他の人から継承したコードですが、私はこれを長年にわたって戦ってきました。

Answer 1

[OK]を、実行する事がwidth: 100%でdisplay: inline-blockから.chat__messages__innerと.chat__messages__listを設定することでした、と.chat__messages__itemはmax-width: 100%を持っている必要が判明しました。

Answer 2

Here is a question you could check out。答えの1つは、私が試してみたいことを示唆しています。これは、単語を打ち砕く機会を作り出す<wbr>タグを使用することです。 You can read about it here。