文本溢出：省略號不按預期工作

Question

我有一個響應式設計佈局，我正在構建。在一個段落標籤中，我有Lorem ipsum。我的響應式設計中的所有內容都按預期工作，除了收縮該盒子以滿足最大寬度爲580px的媒體查詢時，文本溢出：省略號不起作用。

下面是我的代碼：

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; 
} 

}

請讓我知道，如果我做錯了什麼。

Answer 1

嘗試white-space: nowrap;

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