如何讓文本溢出設置寬度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

上使用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

使用白色空間：NOWRAP避免文本

.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>