div内にp個のテキストが水平に含まれています

Question

私はウェブサイト用の友達リストスクリプトを作成し、チャットセクションで面白そうに見えるUIの問題を発見しました。チャットメッセージは非常に長い属性overflow: scrollを持っているチャットコンテンツのdivに追加されますthatsの場合、それはこのように、水平に広がっ：

は、私はそれコンテンツ内そう<p>タグを作成する必要がありますdivがコンテンツdivよりも広い場合、次の行に折り返します。これは起こりません。私のCSSは今のようになります：

#chatContentDiv { 
    height: 70%; 
    width: 100%; 
    overflow: scroll; 
    background: rgba(0, 0, 75, 0.3); 
    text-align: left; 
} 

#chatContentDiv p { 
    font-size: medium; 
    width: 100%; 
    padding: 10px; 
    margin: 0; 
} 

これを達成する方法はありますか？私はそれがまだ上下にスクロールできるようにする必要がありますが、メッセージに非常に長い単語が含まれている場合、それを横に伸ばすことはできません。

Answer 1

使用word-wrapプロパティそれはラッパー

#chatContentDiv p { 
    font-size: medium; 
    width: 100%; 
    word-wrap: break-word; 
    padding: 10px; 
    margin: 0; 
} 

よりも広くなっている場合は、単語を破る...これを試してみてください