У меня небольшая проблема: я не нашел решения по переполнению стека.

Вот что я получил:

И вот как я хотел бы это:

Для создания эффекта заголовка я использую абсолютную позицию. Я даже не знаю ширину и высоту из моего названия. Таким образом, большой текст разрывается при использовании этого решения.

Мой HTML:

<div class="content">
  <h1 class="title">February 2015</h1>
  <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>

Мой CSS:

.content {
  border: 3px double black;
  padding-top: 60px;
  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;
}

Посмотрите пример на Codepen, чтобы сделать жизнь проще:http://codepen.io/caio/pen/ZYoyPb