Sayakiss Sayakiss - 3 months ago 9
CSS Question

Why my text fold into 4 lines?

Code:



#a {
position: absolute;
left: 100px;
}

#b {
position: absolute;
left: 200px;
top: 100px;
}

<div id="a">
test test test test<span id="b">xxxx xxxx xxxx xxxx</span>
</div>





The result is like that:

test test test test

xxxx
xxxx
xxxx
xxxx


You can see my "xxxx" texts fold into 4 lines.

But what I want is:

test test test test

xxxx xxxx xxxx xxxx


So my question:


  1. Why my text fold into 4 lines instead of 1 line?

  2. How to achieve the result I wanted?






EDIT:

As @Manish Dalal posted, it's quite a strange behavior:


Is there any CSS rule applied on div or width of any of the parent is limited?

If I copy only this code (as is) on an HTML page, I can see what you wish to achieve. So I assume that some parent control that have position relative and have limited width (by itself or due to its parents') and hence have limited the width of the div. (As by default a div will take all the horizontal spacing.)

Answer

Is there any CSS rule applied on div or width of any of the parent is limited?

If I copy only this code (as is) on an HTML page, I can see what you wish to achieve. So I assume that some parent control that have position relative and have limited width (by itself or due to its parents') and hence have limited the width of the div. (As by default a div will take all the horizontal spacing.)

Comments