CODEWITHSUNDEEP
htmlcss
frosty
frosty

Reputation: 2649

Having sentence on the same line without turning the div into an inline element

I have a div, with a sentence inside, but I want the whole sentence to be on the same line, without having to turn the div into an inline element, nor change the width of the div. Is that possible?

#block {
  width: 75px;
  text-align: center;
  border: 1px solid blue;
  bottom: 0;
}
<div id = 'block'> This is a sentence </div>

Upvotes: 1

Views: 74

Answers (1)

Kishor
Kishor

Reputation: 2677

You can use white-space: nowrap style. You can also use text-overflow: ellipsis, to get '..' at the end instead of overflow.

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

Upvotes: 5

Related Questions