position absolute full width if necessary

Question

I have a div with "position: absolute" and a title inside. If the title is long, a break line is automatically applied even though the div width may increase.

I set the property max-width: 100% so that the text is added to the line only when we reach 100%. Unfortunately, the text breaks at random.

Here are the properties of the absolute div:

position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 1px);

The current rendering

Do you have a solution ? Sorry for my english, i am working to improve it

Answer 1

Set the display: flex for your div. By the way position: absolute doesn't work with what I have suggested. Or you can try making your text in the div float and your div should have overflow: hidden .