CSS: Wrap whole blocks of text according to container width

Question

I have some block of text like this:

<div>
    <span class="part-1">Some text.</span>
    <span class="part-2">Some text.</span>
</div>

Parent div element has fluid width. How to make two span elements to remain in one line if container is wide enough, to wrap them if there is not enough space, but to avoid wrapping inside span elements?

In other words, .part-2 should be either in line with .part-1 or below it, but always whole.

EDIT: Important part is that .part-2 should not overflow the container, which happens if white-space: no-wrap is used.

Answer 1

<style>
    .unbreakable{
        white-space: nowrap;
    }
    #container{
        overflow:hidden;
    }

</style>

<div id="container">
    <span class="part-1 unbreakable">Some text.</span>
    <span class="part-2 unbreakable">Some text.</span>
</div>

Using the white-space css property, you can define how wrapping can occur inside elements. Using nowrap will prevent any wrapping on spaces.

EDIT: Added overflow hidden so the text doesn't go out. You could use scroll to add scrollbars.