2

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

enter image description here

or this

enter image description here

... look like :

enter image description here

?

Thanks for any help

Improve this question
1
  • try adding min-width:80% to the title. Commented Apr 23, 2018 at 3:15

2 Answers 2

Reset to default
2

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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>

Improve this answer

2 Comments

This does not stay centered with smaller amount of text
@billynoah is right. if there is only one word or two, the div is not centered.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.