Inline text in absolute position

Question

I am trying to display text contained in a div which has a position: absolute; on only one line.

The parent is position:relative; and the width of the parent might be smaller than the div containing the text.

I would like the text of my position: absolute; div staying on one line, how could I achieve that? For the moment, the maximum width of the div is the width of the parent.

Here is a jsfiddle I made to explain the problem: https://jsfiddle.net/El_Matella/fb15mq68/

Thanks a lot for your help :)

take a look at this question (has a lot of various answers): stackoverflow.com/questions/5392853/… — user3186555
– user3186555, Commented Apr 9, 2016 at 9:40

Oriol · Accepted Answer · 2016-04-09 09:34:46Z

You can prevent text wrapping with the white-space property:

white-space: nowrap

Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.
white-space: pre

Sequences of whitespace are preserved, lines are only broken at newline characters in the source and at <br> elements.

Probably, you want the first one.

.box { white-space: nowrap; }

.container { background: pink; width: 100px; height: 100px; margin: auto; position: relative; } .box { position: absolute; right: 0; background: green; top: 100%; white-space: nowrap; }

<div class="container"> <div class="box"> This is the text I want to display inline </div> </div>

also, using escape characters can work too, and they are more widely supported than anything. I give you my answer free to use in reference. Not a problem with me: stackoverflow.com/questions/5392853/…
I just don't want to have to repost it. Laziness, you know? plus extra kudos for you
Thanks for the link, very interesting, I didn't know all of that!

Collectives™ on Stack Overflow

Inline text in absolute position

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related