HTML + CSS:如何强制div内容保持一行？

Question

HTML:

<div>Stack Overflow is the BEST !!!</div>

CSS:

div {
    border: 1px solid black;
    width: 70px;
}

我怎么能强迫弦线保持在一条线上(即在"溢出"中间切割)？

我尝试使用overflow: hidden,但它没有帮助.

Answer 1

试试这个:

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

Answer 2

使用white-space:nowrap和overflow:hidden

Answer 3

在你的CSS使用 white-space:nowrap;

Answer 4

您的HTML代码: <div>Stack Overflow is the BEST !!!</div>

CSS:

div {
    width: 100px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

现在的结果应该是:

Stack Overf...

Answer 5

每个人都跳上这个!!! 我也做了一个小提琴:

RobAgar white-space:nowrap首先指出了一点.

overflow: hidden如果您不想看到额外的角色进入您的布局,您需要这里的一些事情.

另外,如上所述,您可以使用white-space: pre(请参阅EnderMB),请记住,pre不会崩溃空白区域white-space: nowrap.

Answer 6

div {
    display: flex;
    flex-direction: row; 
}

是对我有用的解决方案。在某些使用div-lists 的情况下，这是必需的。

一些替代方向值是row-reverse, column, column-reverse, unset, initial, inherit 做你期望他们做的事情

Answer 7

将其添加到您的 div 中：

white-space: nowrap;

Answer 8

在跨度中你需要添加： { display: block; }

span {
  width: 70px;
  border: 1px solid black;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  }

<span>Stack Overflow is the BEST!!!</span>