Text is breaking using absolute positioning

There is another solution:

.title {
    width: max-content;
}

It is widely supported (92.25% as of 17.07.2019) https://caniuse.com/#feat=intrinsic-width

For details read this answer.

Here, I have made a few minor CSS changes for you.

/* Cosmetics */
* { box-sizing: border-box; }
body { margin: 50px; }
p { margin: 0; }


/* True Code */
.content {
  border: 3px double black;
  padding-top: 30px;
  position: relative;
  width: 350px;
}

.content p { margin: 20px; }

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

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)