Css UL文本菜单：通过媒体查询内联转换为块-显示问题

我有文本菜单代码，工作得很好。它使用标准UL，并设置为仅显示元素之间带有分隔符的内联项目（仅限），并且仅当这些元素位于同一行时

看小提琴：

HTML:

问题是，我正在尝试添加一个媒体查询，以便在471px下，菜单不再是内联的，而是显示为一个带有左项目符号的普通单列列表，并对任何过长的元素使用“省略号”。正如您在小提琴中看到的，列表将精细转换为从内联到块的单个列，并使用nowrap保留单行-但是我似乎无法在项目的开头显示项目符号，也无法使“省略号”功能正常工作，无论我做什么

我在这里看过很多帖子，但我很难找到与这项技术相关的答案，或者只是没有找到正确的术语

注:

（1） 项目符号：您会注意到，如果在媒体查询中指定的“”中添加任何内容，项目符号看起来很好（但不幸的是带有该文本），但是如果您将其保留为一个空格，则什么也没有。由于只有空格的方法在：after指定中有效，我不明白为什么它在：before中失败

（2） 省略号：如果在媒体查询中，您将项目保留为“内联”，您将看到省略号在471px下的效果与预期一样-尽管项目不再位于单个列中。一旦切换到block，这是不可能的。再一次，我尝试了各种选择，但就是没能让它发挥作用

---

您有什么想法吗

更改最大宽度：470px媒体查询：

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

与：

---

您好，谢谢，但似乎没有效果-注意我对这个问题的小提琴，如果您有任何进一步的想法，他们将不胜感激。。。

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

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

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