長い文字列を改行して短い文字列に置き換えてください

Question

ユーザーがランダムなコメントを入力できるページを作成しています。 （下に見られるように） 私が持っている問題は、すべてのボックスをページ内に収めたいということです。私がテストしながら、私は<span>として、各出力を持っている瞬間など、

を例えば、より長い文字列は、新しい行に移動する必要がありますし、短い文字列に置き換えること。 ご協力いただければ幸いです！

Answer 1

white-space: nowrap;を使用できます。

デモ：

div { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    margin: 5px; 
 
    padding: 5px 10px; 
 
    border-radius: 3px; 
 
    border: 1px solid #333; 
 
}

<div> 
 
    Content goes here. 
 
</div> 
 
<div> 
 
    Content goes here. 
 
</div> 
 
<div> 
 
    Content goes here. Content goes here. Content goes here. 
 
</div> 
 
<div> 
 
    Content goes here. 
 
</div>

限りのギャップを埋めるための要素を再注文すると、あなたにはJavaScriptが必要になる場合があります。

Answer 2

displayの条件を使用してCSS、simpyでこれを行うことができます。

.classname {display:inline-block;} 

あなたはすべての要素ではなく、全体のラインを取りたい場合にも、blockを使用することができます。

.classname {display:block;} 

Answer 3

私はあなたがそれぞれがディスプレイにコメントを保持するDIV作るべきだと思う：をブロックし、それがマキシ幅です設定：100％。私はそれがうまくいくはずだと思います。 注：これはコメントでしたが、私はできませんこれは、テキストのための十分なスペースを作成し、テキストがdivを超える場合は、新しい行が表示されます。