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

Question

我有一些带有 display: inline-block 的 span 元素，以便元素在响应时位于新行上。截至目前在桌面上看起来像这样:

Name | Street | City

...折叠时它们看起来像这样:

Name 
 | Street 
 | City

但我真正想要的是......当元素因响应而崩溃时，它们应该在彼此下面并且 |应该消失了……像这样:

Name 
Street 
City    

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

这是我的设置:

html:

<p class="record-meta">
    <span style="display: inline-block;">
        <span class="left5">Name</span>
    </span>
    <span style="display: inline-block;">
        <span class="left5">|</span>
        <span class="left5">Street</span>
    </span>
    <span style="display: inline-block;">
        <span class="left5">|</span>
        <span class="left5">City</span>
    </span>
</p>

CSS:

.left5 {
    margin-left: 5px;
}

... Street 和 City 是动态元素并且宽度会变化...所以我想我无法设置 css @media ...

Answer 1

正如您所说，内容长度可能会有所不同。所以你必须计算<p class="record-meta">的高度在窗口调整大小的基础上，您可以通过向 html 元素添加删除类来设置换行符。