divのサイズを修正しても応答性を保つ方法

Question

私は情報を含むコンテナ（ボックス）を作ろうとしていますが、サイズを修正したいのですが、応答性にしたいと思います。それは大丈夫だ瞬間のために同じ を：：WRONG それはサイズに

をブロックする必要がありますので、それを許可しています

：私は何をしようとしているビットをよりよく理解するために、この画像を見て

.liContainer { 
 
    list-style-type: none; 
 
    border-style: solid; 
 
    margin-bottom: 5px; 
 
}

<li class="liContainer"> 
 
    <div> 
 
    <h3>Container 1</h3> 
 
    </div> 
 
    <div id="id"> 
 
    <span>90b5bb870feb5a1148e4f9042f87c957043b71d60dc91d743bccdc5a10c0f54f </span> 
 
    </div> 
 
    <div> 
 
    State:<span class="state">Running</span> 
 
    </div> 
 
</li>

：私は、次のコードを試してみました

Answer 1

word-break:break-allを追加 - これはラインが

任意の二つの文字の間を破ることができますデモは、以下を参照してください：

私がまさに必要

.liContainer { 
 
    list-style-type: none; 
 
    border-style: solid; 
 
    margin-bottom: 5px; 
 
    word-break: break-all; 
 
}

<li class="liContainer"> 
 
    <div> 
 
    <h3>Container 1</h3> 
 
    </div> 
 
    <div id="id"> 
 
    <span>90b5bb870feb5a1148e4f9042f87c957043b71d60dc91d743bccdc5a10c0f54f </span> 
 
    </div> 
 
    <div> 
 
    State:<span class="state">Running</span> 
 
    </div> 
 
</li>