Text is breaking using absolute positioning

Question

I have a small challenge that I haven\'t found any solution on Stack Overflow.

That\'s what I got:

Answer 1

The easiest solution would be to add white-space: nowrap. In doing so, the h1 text will not break to a new line. (updated example)

.title {
  white-space: nowrap;
  background: black;
  border-radius: 5px;
  color: white;
  left: 50%;
  padding: 10px;
  position: absolute;
  text-align: center;
  transform: translate(-50%, -50%);
  top: 0;
}

In addition, you could also add text-overflow: ellipsis/overflow: hidden/width: 100% so that the text forms ellipsis and never breaks to a new line. (example here)