I'm struggling to figure out how to wrap all the text and not just one single line. If you have any suggestions on how to change this, I would greatly appreciate your help.
Check out this link for more information
<h1>I need to make a change:</h1>
<div class="hi1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Trying to fit so much content into this small space Lorem ipsum dolor sit amet, consectetur adipisicing elit. How can we expand it? Thanks!</p>
</div>
<h1>to This:</h1>
<div class="hi2">
<p>More lorem ipsum text about making changes to the layout and design of elements in this project. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<h1>and here's what happened:</h1>
<div class="hi3">
<p class="p">Even more lorem ipsum to showcase the effects of the changes made Lorem ipsum dolor sit amet, consectetur adipisicing elit. Feel free to give feedback!</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;}