Span with absolute position

HTML & CSS
1

Hey guys,

Is there a way to make a span with an absolute position adjust its width appropriately depending on how much text is in it?

I want to give it a max-width, but also want it to only be as large as the amount of text in it. So if there are just two words of 12pt font, for example, the span will be about 50px wide.

Thanks!

2

Hi,

An absolute element will always shrinkwrap its content anyway unless you have applied a width of some sort.

You don’t need to do anything else special.

e.g.


span{
position:absolute;
left:0;
top:0;
max-width:300px;/* or whatever you need*/
}

I would have assumed that you’d tried this so was wondering if perhaps there was some other problem that you were having?

3

Well, the thing is, the div will appear thinner than the text at times (it has background color and border, so its like a box), and I want it to grow depending on how much text is there, but also set a maximum limit so it doesn’t get TOO wide. So I guess it’s not possible with an absolute eh?

4

Hi,

I’m not quite sure what you mean as the background and borders will automatically grow with the text content. You can set a max-width and then the text will wrap at that width.

It sounds to me as though it will do exactly what you want by default so I guess I’m missing the point somewhere along the line :slight_smile:

5

You’re right. I got it to work. Thank you very much, Paul!