在同一行上有句子而不将div转换为内联元素

Question

我有一个div,里面有一个句子,但我希望整个句子在同一行,不必将div转换为内联元素,也不改变div的宽度.那可能吗？

#block {
  width: 75px;
  text-align: center;
  border: 1px solid blue;
  bottom: 0;
}

<div id = 'block'> This is a sentence </div>

Answer 1

您可以使用white-space:nowrap样式.你也可以使用文本溢出:省略号,在最后得到'..'而不是溢出.

#block, #block2 {
   width: 75px;
   text-align: center;
   border: 1px solid blue;
   bottom: 0;
   white-space: nowrap;
}

#block2 {
   overflow: hidden;
   text-overflow: ellipsis;
}

<div id = 'block'> This is a sentence </div>
<div id = 'block2'> This is a sentence </div>