Text is breaking using absolute positioning

absolute, css, html

Solution

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)

Problem

I have a small challenge that I haven't found any solution on Stack Overflow. That's what I got: And that's how I'd like it: To produce this title effect I'm using absolute position. I don't even know the width and the height from my title. So, big text breaks when using this solution. My 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> ``` My 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; } ``` See an example on Codepen to make life easier: http://codepen.io/caio/pen/ZYoyPb

Original source

Related problems