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:

wrong

And that's how I'd like it:

correct

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

score 26 · Accepted Answer · answered Feb 23 '15 at 18:42

26

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)

answered Feb 23 '15 at 18:42

Josh Crozier

233,099
56
391
304

1

can you please explain why this happens? – Alex Jones Dec 20 '18 at 10:08
perfectly solved my own problem with this ty – the VBE - it's right for me Jul 16 '21 at 01:53

Eduard Kolosovskyi · Answer 2 · 2019-07-17T08:37:09.293

4

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.

edited Jul 17 '19 at 08:37

answered Jul 17 '19 at 08:20

Eduard Kolosovskyi

1,396
12
18

Could you send the Codepen updated link with this solution? It didn't work for me. – Caio Tarifa Jul 30 '19 at 02:28
@CaioTarifa please make sure your browser supports intrinsic-width https://caniuse.com/#feat=intrinsic-width – Eduard Kolosovskyi Jul 30 '19 at 08:10

score 3 · Answer 3 · answered Feb 23 '15 at 18:46

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;
}

score 2 · Answer 4 · answered Jun 27 '17 at 09:45

your code was correct but the left attribute spoiled your output. as your .content div was set to relative, the .title will remain inside it. So you just need to change the position your .title using transform: translate(); code. And voila you got your desired output.

You might notice i have given padding-top to the .content just to place the heading in a proper place.

the changed code is as follows :

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


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

.content p { margin: 20px; }

.title {
  background: black;
  border-radius: 5px;
  color: white;
  padding: 10px;
  position: absolute;
  transform: translate(22%,-110%);
}

Text is breaking using absolute positioning

4 Answers4

Linked