Preserve normal word wrapping inside absolutely positioned container

Try to use one of these approaches:

Approach 1: transform: translate(x, y); instead of position: absolute; left: x; top: y;

Approach 2: width: max-content; For details read this answer.

Try using position: relative; on .text

EDIT: Also put it inside an absolute positioned wrapper with your 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 amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>
</div>