如果 display=flex 则不显示 css 内容元素

Question

我有一行描述完整的公司地址。 它是由不同的部件制成的

<div><b>COMPANY</b>&nbsp;•&nbsp;Address,&nbsp;City&nbsp;•&nbsp;VAT 12345678901</div>

在大屏幕中，div 显示为一条长线：

COMPANY • Address line, City • VAT 12345678901

但在小型移动设备上显示为三行：

     COMPANY • 
Address line, City • 
  VAT 12345678901

我的目标是移除小型设备上的子弹。 为了实现这个目标，我定义了一个span 元素如下：

.bg99 .footer-divider {
    content: " • ";
}
@media only screen and (max-width: 768px){ 

    .bg99 div.company div {
        flex-direction: column;    
    }
    .bg99 .footer-divider {
        content: "  "
    }
    
  }

并将该行更改如下：

<div><b>COMPANY</b><span className="footer-divider"/>Address,&nbsp;City<span className="footer-divider"/>VAT 12345678901</div>

但结果是两个设备上的子弹都消失了。

检查浏览器，我看到 CSS 类 footer-divider 和内容

.bg99 .footer-divider {
    content: " • ";
}

但子弹在屏幕上不可见。看起来该规则不应该应用。

有什么想法吗？

Answer 1

我认为首先您需要在 html 标记中将“className”替换为“class”

试试下面可能有帮助的代码

HTML

<div class="bg99">
<b>COMPANY</b>
<span class="footer-divider">Address,&nbsp;City</span>
<span class="footer-divider">VAT 12345678901</span>
</div>

CSS

@media only screen and (max-width: 768px){

    .bg99 div.company div {
        flex-direction: column;    
    }
    
    .bg99 .footer-divider::before{
        content: "*"
    }
    
  }