Text is breaking using absolute positioning, part 2

Question

This question refers to this one : Text is breaking using absolute positioning

Answers of this one recommend to use white-space: nowrap;

My case is exactly the same (I don't know the width of the title div and I dont want to set it), but I do not want my text to be systematically on a single line either.

My title has a max-width: 300px and I would like the content to be on a single line until it reaches this max-width, after that, I would like to have a line break and start over on a other one. (dont know if I am clear enough). In this case, white-space: nowrap; is useless ...

Here is a codepen : https://codepen.io/msieurtoph/pen/wjKNZZ

How can I do to make this

or this

... look like :

?

Thanks for any help

try adding `min-width:80%` to the title. – Gautam Naik Apr 23 '18 at 03:15 — Gautam Naik, Apr 23 '18 at 03:15

But those new buttons though.. · Accepted Answer · 2018-04-23T03:11:53.593

The issue you're having is the way you're centering an absolute positioned div of unknown width using transform / translate. The left: 50% rule effectively gives your title a max width of 50% of the parent because the browser sees it as beginning in the middle and extending to the right edge.

My solution is to wrap the title in a full width absolutely positioned div and then centering it using text-align: center on the parent and display: inline-block on the child. This will allow the h2 element to expand dynamically up to your max-width but still collapse if the content doesn't require it.

* {
  box-sizing: border-box;
}

body {
  margin: 60px;
}

p {
  margin: 0;
}

.content {
  border: 3px double black;
  padding-top: 60px;
  position: relative;
  width: 350px;
}

.content p {
  margin: 20px;
}

.title {
  left: 0;
  right: 0;
  top: 0;
  position: absolute;
  text-align: center;
  transform: translateY(-50%);
}

.title h1 {
  margin: 0;
  padding: 10px;
  max-width: 300px;
  background: black;
  border-radius: 5px;
  color: red;
  display: inline-block;
}

<div class="content">
  <div class="title">
    <h1>February 2015 and real long text</h1>
  </div>
  <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>

score 0 · Answer 2 · answered Apr 23 '18 at 04:18

Removing the transform/translate and white-space, u can set it to absolute positioning with left and top,changing the max-width:90%,

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


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

.content p { margin: 20px; }

.title {
 background: black;
 border-radius: 5px;
 color: red;
 left: 16px;
 padding: 10px;
 position: absolute;
 text-align: center;
 top: -40px;
 max-width: 90%;
}

<div class="content">
  <h1 class="title">February 2015 and real long text</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>

@billynoah is right. if there is only one word or two, the div is not centered. — M'sieur Toph', Apr 26 '18 at 20:44

Text is breaking using absolute positioning, part 2

2 Answers2