How to prevent paragraph text from breaking onto next line

Question

I have a div that changes width according to parent div width. This is to create responsiveness: when screen width gets reduced, that width will also change with it.

Problem: when the screen width is reduced, the text keeps on changing, as in the words that overflow get sent onto a new line (of course this happens because the width is parent div is variable.

How can I prevent this from happening? Is it as simple as creating a fixed width parent div or are there other solutions? Thanks

CSS

div.parDiv {
width:80%;
margin-left:10%;
}

HTML

<div class="parDiv">
    <p class="text">This is some long text that breaks onto the next line when reducing the screen width</p>
</div>

Answer 1

It's not clear from your question what you want to achieve exactly, but if you want the text to stop wrapping, use white-space: nowrap :

 div.parDiv { width:80%; margin-left:10%; white-space: nowrap; } 

 <div class="parDiv"> <p class="text">This is some long text that breaks onto the next line when reducing the screen width</p> </div> <div class="parDiv"> <p class="text">This is some long text that breaks onto the next line here<br/> because of the break element included</p> </div> 

I should point out that the text will overflow it's container once the width of the latter is less than the width of the text, so you might want to use a min-width rule to prevent that.