落ちることなくテキストのオーバーフロー設定幅divを作る方法は？

Question

私は100px幅のdivを持っています。それはoverflow-x:hiddenに設定されています。

これは、テキストがコンテナの長さを超えた場合にテキストがドロップされないようにし、代わりにコンテナをオーバーフローさせて見えないようにしたいと考えています。

.user_name { 
 
    width: 100px; 
 
    overflow-x: hidden; 
 
}

<div class='user_name'>This is a test</div>

テキストは、コンテナだけの権利をオーバーフローし、目に見えないというのではなく、ドロップダウンします。どのように私は後に何を達成することができますか？

Answer 1

あなたのルールにwhite-space: nowrapを追加してください。

.user_name { 
 
    width: 100px; 
 
    overflow-x: hidden; 
 
    white-space: nowrap; 
 
}

<div class='user_name'>This is a test This is a test</div>

Answer 2

のみ1行にそれを制限するためのdivにwhite-space: nowrap;を使用してください。

.user_name { 
 
    width: 50px; 
 
    overflow-x: hidden; 
 
    white-space: nowrap; 
 
}

<div class='user_name'>This is a test</div>

Answer 3

使用ホワイトスペース：このコード断片はOPの質問に答えるかもしれないが、テキスト

.user_name { 
     width: 100px; 
     overflow-x: hidden; 
     white-space: nowrap; 
    } 

のラッピングCodpen- https://codepen.io/nagasai/pen/JNOBRb

Answer 4

#div1 { 
white-space: nowrap; 
width: 12em; 
overflow: hidden; 
text-overflow: clip; 
border: 1px solid #000000;} 

<div id="div1">This is some long text that will not fit in the box</div>