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

文本溢出：省略号未按预期工作

1 个答案: