html - 在同一行上有句子而不将 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 样式。您还可以使用 text-overflow: ellipsis，在末尾获取 '..' 而不是溢出。

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