テキストをdivの幅に制限するにはどうすればよいですか？

Question

私はテキストをdivの幅に制限しようとしており、動作させることができません。

TESTE3と書かれているところでは、テキストが赤いdivの端を越えないようにします。誰も私を助けることができますか？ Image sample

Answer 1

私はあなたが使用して私たちのコード例を与えることを示唆しているいずれかのコードエディタ、またはjsfiddleに建てられました。

しかし、問題を解決するには2つの方法があります。ここに示すように、あなたはoverflow:hidden;のために行くことができ

次のいずれかhttps://jsfiddle.net/L62w981g/

それとも、ここに示すように、テキストがword-breakかwhite-spaceを使用して次の行に流れ込むことができます：ここではhttps://jsfiddle.net/L62w981g/1/

はのためのコードですオーバーフロー修正：

div { 
 
    background-color:red; 
 
    height:60px; 
 
    overflow:hidden; 
 
    width:350px; 
 
}

<div> 
 
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkthistextishidden 
 
</div>

ここ

は空白の修正のためのコードです：

div { 
 
    background-color:red; 
 
    height:60px; 
 
    overflow:hidden; 
 
    width:350px; 
 
    word-break:break-all; 
 
    white-space:normal; 
 
}

<div> 
 
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkthistextishidden 
 
</div>

Answer 2

使用このCSS：

word-break: break-all;