Question

我有一个100px宽的div。它设置为overflow-x:hidden。

我希望这可以实现我想要的，如果文本超过容器的长度，则保持文本不会掉落，而是溢出容器并且不可见。

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

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

文本只会下拉而不是溢出容器的右边并且不可见。我怎样才能实现我的目标？

Answer 1

将db.statements.aggregate([{ $match:{name:"RINGGO"}},{ $project:{ year : { $year : "$date" }, month : { $month : "$date" }, week : { $week : "$date" }, day : { $dayOfWeek : "$date" }, _id : 1, name : 1, amount: 1 } }, { $group : { _id : { year : "$year", month : "$month", week : "$week", day : "$day" }, totalDailyAmount : { $sum : "$amount" } } }, { $group : { _id : { year : "$_id.year", month : "$_id.month", week : "$_id.week" }, totalWeeklyAmount : { $sum : "$totalDailyAmount" }, totalDayAmount : { $push : { totalDayAmount : "$totalDailyAmount", dayOfWeek : "$_id.day" } } } } ])添加到您的规则中。

white-space: nowrap

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

Answer 2

使用white-space：nowrap以避免包装文本

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

Codpen- https://codepen.io/nagasai/pen/JNOBRb

Answer 3

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

如何使文本溢出设置宽度div而不下降？

3 个答案: