text-wrap semi working, need improvement - html

Question

I don't know how to wrap all the text and not just one single line, If you have any idea how to change this I will gratefully thank you
http://jsfiddle.net/dkanem13/1/
<h1>I need to change this:</h1>
<div class="hi1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem perspiciatis similique eligendi quas quo reprehenderit ullam. Commodi repellendus distinctio similique voluptate sint debitis est eos minus eaque enim excepturi perspiciatis Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit impedit eveniet consequatur itaque ipsa hic est adipisci pariatur exercitationem mole Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius amet perferendis sint accusamus!stias mollitia debitis quae commodi ut a facilis alias dolorum doloribus!
</p>
</div>
<h1>to This:</h1>
<div class="hi2">
<p>Lorem ipsum dolor sit amet, consectetur adipisici Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem ipsam eaque consequatur eligendi ullam soluta esse eius sapiente recusandae nostrum. ng Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis odio fuga nisi incidunt.elit. Aliquam expedita praesentium quo ratione? Nisi maxime reprehenderit debitis ex aspernatur itaque voluptate dicta neque vel eos quia repudiandae culpa harum bla bla bla cbla ullam...</p>
</div>
<h1>and this is what happend</h1>
<div class="hi3">
<p class="p"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus expedita ex perspiciatis magni in architecto totam ut nam vel soluta deleniti rerum eos molestiae commodi laborum accusamus culpa? Porro corporis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quia ex fuga quibusdam eius voluptates odio pariatur maiores ipsa saepe tempore autem facilis voluptatum dignissimos suscipit architecto iste! Enim adipisci Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium ipsum est rerum quis consequatur nostrum possimus cupiditate dolor aspernatur modi numquam dolore culpa sunt iste ea voluptatibus doloremque accusamus reiciendis!.
</p>
</div>
div{
width:250px;
height: 250px;
background: yellow;
margin: 85px 15px;
}
.hi1{background: tomato;}
.hi2{background: royalblue;}
.p{
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;}

Answer 1

white-space: nowrap is preventing it from going to the next line. In fact, that's exactly what it's intended to do.
http://www.w3schools.com/cssref/pr_text_white-space.asp
EDIT: If you want to make text not overflow, consider where you are adding that property. You want the container not to overflow, not the text. So add overflow: hidden or text-overflow: ellipsis to your div, not to the p tag.
http://www.w3schools.com/cssref/pr_pos_overflow.asp