css - UL 文本菜单 : Inline converted to Block via Media Query - Display Issues

Question

我有运行良好的文本菜单代码。它使用标准 UL 并设置为仅在元素之间使用分隔线显示内联元素(仅)，并且仅当这些元素位于同一行时。

参见 fiddle :http://jsfiddle.net/4gbww05e/

HTML:

<ul class="topmenu">
<li><a href="#">List Item 1</a></li>
<li><a href="#">List Item 2</a></li>
<li><a href="#">List Item 3 - with expanded text that when below 471px should use ellipsis instead of wrapping</a></li>
<li><a href="#">List Item 4</a></li>
<li><a href="#">List Item 5</a></li>
<li><a href="#">List Item 6</a></li>
<li><a href="#">List Item 7</a></li>
<li><a href="#">List Item 8</a></li>
</ul>

CSS:

ul.topmenu {width: 100%; padding: 0; text-align: left;}
ul.topmenu li { display: inline;  }
ul.topmenu li:after {
content: " ";
word-spacing: 1.1em;
background-repeat: no-repeat;
background-position: 50% 60%;
background-image:  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAOElEQVQI113M0Q3AIBRC0aM76P7jmHSmSj/6mibyc4EQkEEWuYtDmU1SXO1d6H7tjgupIl8+P+cD22cff9U1wbsAAAAASUVORK5CYII=);
}

@media (max-width:470px) {
ul.topmenu {overflow: hidden; text-overflow: ellipsis;}
ul.topmenu li {display:block; white-space: nowrap;}
ul.topmenu li:before {
content: " ";
word-spacing: 1.1em;
background-repeat: no-repeat;
background-position: 50% 60%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAOElEQVQI113M0Q3AIBRC0aM76P7jmHSmSj/6mibyc4EQkEEWuYtDmU1SXO1d6H7tjgupIl8+P+cD22cff9U1wbsAAAAASUVORK5CYII=);
}
}

问题是，我正在尝试添加一个媒体查询，以便在 471 像素以下时，菜单不再是内联的，而是显示为带有左元素符号的普通单列列表，并对任何元素使用“省略号”太长。正如您在 fiddle 中看到的那样，该列表可以很好地转换为从内联到 block 的单列，并使用 nowrap 保留单行 - 但是我似乎无法在元素的开头显示元素符号，也无法制作“省略号”函数工作，无论我做什么。

我在这里查看了很多帖子，但我很难找到与此技术相关的答案，或者根本没有查找正确的术语。

注意事项:

(1) 元素符号:您会注意到，如果您将任何内容添加到媒体查询中指定的“”，元素符号看起来很好(但不幸的是，带有该文本)-但如果您将其仅保留为空格-没有什么。由于 space-only 方法在 :after 指定中有效，我不明白为什么它在 :before 中失败。

(2) 省略号:如果在媒体查询中您将元素保留为“内联”，您将看到省略号在低于 471 像素时按预期工作 - 尽管元素不再位于单个列中。一旦切换到阻止 - 这是不行的。同样，我尝试了各种选择，但无法使其正常工作。

任何想法表示赞赏

Answer 1

改变 max-width: 470px 媒体查询怎么样:

ul.topmenu li {display:block; white-space: nowrap;}

与:

ul.topmenu li {display:list-item; white-space: nowrap;}