html - Preserve normal word wrapping inside absolutely positioned container -

html - Preserve normal word wrapping inside absolutely positioned container -

i have absolutely positioned block of text within relatively positioned container. absolutely positioned element exceeds right boundary of container.

the problem is: text isn't wrapping normal; it's breaking prematurely rather expanding defined max-width:

observed behavior:

desired behavior

html/css (jsfiddle: http://jsfiddle.net/wmcjm/):

<style> .container { position: relative; width: 300px; background: #ccc; height: 100px; } .text { position: absolute; max-width: 150px; left: 290px; top: 10px; background: lightblue; } </style> <div class="container"> <div class="text">lorem ipsum dolor sit down amet</div> </div>

note: couple changes appear accomplish desired behavior, aren't quite i'm looking for, include:

defining min-width: 150px on .text (the text might 1 word, , don't want container oversized) positioning .text. relative document, rather .container (it needs appear beside container, when browser resized)

try using position: relative; on .text

edit: set within absolute positioned wrapper custom max-width

css

.container { position: relative; width: 300px; background: #ccc; height: 300px; } .wrap_text { position: absolute; max-width: 200px; top: 10px; } .text { position: relative; left: 290px; background: lightblue; }

and html:

<div class="container"> <div class="wrap_text"> <div class="text"> lorem ipsum dolor sit down amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> </div>

html css css-position word-wrap