Javascript CSS/Js-当换行符和元素位于第一个位置时隐藏元素并更改CSS

我有一些带有display:inline块的span元素，这些元素在响应时位于新行上。从现在开始，桌面上的外观如下所示：

Name | Street | City

Name 
 | Street 
 | City

Name 
Street 
City    

。。。折叠时，它们看起来如下所示：

Name | Street | City

Name 
 | Street 
 | City

Name 
Street 
City    

但我真正想要的是。。。当这些元素在地面上坍塌时，它们应该在彼此下面，并且|应该消失。。。像这样：

Name | Street | City

Name 
 | Street 
 | City

Name 
Street 
City    

最好的方法是什么？JS或css我不介意

这就是我的设置：

html:

---

。。。街道和城市是动态的元素，其宽度各不相同。。。所以我想我无法设置css@media…

您可以使用css媒体查询来实现这一点

span.block{
显示：内联块；
}
@媒体屏幕和屏幕（最大宽度：480px）{
span.block{
显示：块；
}
.烟斗{
显示：无；
}
}

名称
|
街头
|
城市

正如您所说，内容长度可能会有所不同。因此，您必须计算

在调整窗口大小的基础上，您可以通过向html元素添加删除类来设置换行符。

您好，phillip，您可以据此更改结构，因为这样使用span不是正确的方法，对于分隔符，无需使用span，我们可以在：：after css中使用它

。录制元数据{
列表样式类型：无；
左侧填充：0；
}
.李梅塔{
显示：内联块；
填充：0 5px；
位置：相对位置；
}
.record meta li：：之后{
内容：''；
位置：绝对位置；
左：-3px；
顶部：1px；
宽度：1px；
高度：15px；
背景色：#000；
}
.record meta li:第一个孩子：：之后{
内容：无；
}
@介质（最大宽度：576px）{
.record meta li：：之后{
内容：无；
}
.李梅塔{
宽度：100%；
}
}

名称
街道
城市

如前所述。。。街道和城市是动态的元素，其宽度各不相同。。。所以我不能或者不想设置一个不灵活的css@media…我建议再次阅读这个问题。你的回答是OP想要避免的你所说的宽度变化是什么意思？。。。好。。。街道可以是1个字符长。。。但也有1000个字符长。。。所以在一个固定的宽度（比如最大宽度：480px:-）1000个字符上施展魔法是没有意义的？有没有可能是没有空格的长字符串？你不应该使用|字符，你可以用CSS中的边框来实现。然后不要在小屏幕上显示边框。