text-overflow: Ellipsis not working as expected - html

Question

I have a responsive design layout that I am building. In a paragraph tag I have Lorem ipsum. Everything on my responsive design is working as expected except for the fact that when I shrink the box so it satisfies the media query of a max-width of 580px the text overflow: ellipsis doesn't work.
Below is my code:
HTML:
<p id="maincontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non sapien lobortis enim suscipit convallis a eget mi. Duis vitae augue lacus. Donec molestie enim sit amet sollicitudin suscipit. In ac commodo sem, sit amet iaculis neque. Mauris at mi convallis tellus euismod tristique. Aenean et felis sodales, tempor nunc molestie, dictum libero. Praesent et placerat massa. Pellentesque semper tempus maximus. Duis sit amet ornare dolor. Donec pretium tellus et efficitur gravida. Nam vestibulum tellus a nunc egestas tristique. Donec pellentesque id sapien at molestie.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec eu enim ipsum. Sed sem enim, semper ac imperdiet a, aliquam in elit. Nullam et commodo massa. Donec tincidunt nulla a lectus imperdiet auctor. Duis sodales eu purus ut lobortis. Donec magna metus, ultricies at nulla ut, congue sollicitudin dui. Aenean scelerisque consectetur elementum. Fusce quis ligula sem. Nunc tincidunt aliquam nisl, sit amet egestas nulla molestie quis.Proin dignissim condimentum erat, eget hendrerit justo rhoncus non. Curabitur et metus velit. Morbi massa massa, lacinia in cursus ac, tincidunt eu metus. Vestibulum gravida dui sed purus aliquet interdum. Nunc eget maximus augue. Mauris non malesuada est. Phasellus maximus varius libero, non facilisis dui bibendum sed. Integer congue est a erat egestas mollis. In sed egestas risus, ac viverra mauris. Pellentesque in mi nec diam ullamcorper ullamcorper in in sem. Aenean lacinia consequat erat, eget auctor augue efficitur in. Etiam a justo quam.Nullam vestibulum iaculis purus sagittis vestibulum. Cras tristique varius est, a consequat nulla interdum id. Nam vitae convallis ipsum. Proin eu odio rhoncus, hendrerit odio id, ornare risus. Aliquam feugiat, velit et sagittis lacinia, nulla est viverra diam, eget euismod mauris nunc ac nibh. Integer pulvinar interdum urna, ut consequat sem varius id. Quisque aliquet ipsum quis leo fringilla, gravida aliquam libero fermentum. Integer tincidunt ut odio at tristique. Fusce in elementum nisl. Etiam pulvinar aliquet lacus a dapibus. Curabitur condimentum mattis nibh. Aliquam erat volutpat. Mauris elementum nisi turpis, vitae mattis purus luctus sit amet. Mauris sit amet fermentum nisi. Vivamus iaculis rhoncus lacus.Ut maximus augue in tellus elementum, eget efficitur sem scelerisque. Nam nec augue fermentum, mattis ligula quis, efficitur lacus. Suspendisse posuere libero eu eros tincidunt, ac egestas urna maximus. Sed eget nibh quis ligula semper dapibus. Aliquam ac iaculis lacus. Sed eu mollis elit. Morbi rhoncus eu ante eget consequat. Nam finibus enim ex, ac scelerisque lacus tempor vitae. Ut sagittis convallis sollicitudin. Duis fringilla ipsum orci, a tempor urna euismod laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras cursus libero metus, sed dignissim nisl maximus vitae. Morbi a est a nisl finibus ornare eu vel libero. Praesent eget ligula porta, aliquet eros ut, vestibulum nisi.</p>
CSS3:
#media screen and (max-width: 580px){
nav ul{
max-height: 0;
}
p#maincontent{
overflow: hidden;
text-overflow: ellipsis;
}
.showing {
max-height: 100%;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 15px;
}
#maincontent{
font-size: 80%;
}
.handle {
display: block;
}
}
Please let me know if I am doing something wrong.

Answer 1

try white-space: nowrap;
p#maincontent{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}