白色空间：nowrap无法正常工作

Question

我有<span>元素的页脚。在移动屏幕（我预期）：

桌面显示（不应该分成新行）：

我的HTML和CSS：

@media screen and (min-width: 768px) {
    .rwd-line {
        display: inline;
        white-space: nowrap;
    }
}

.rwd-line {
    display: block;
}

<h4 class="text-center">
   <span class="rwd-line">&copy;<?php echo date('Y') ?> PT Paket Informasi Digital<span class="visible-lg">&bull;</span></span>
   <span class="rwd-line"><a href="https://blog.paket.id" target="_blank">Blog</a><span class="visible-lg">&bull;</span></span>
   <span class="rwd-line"><a href="https://docs.paket.id" target="_blank">Documentation</a><span class="visible-lg">&bull;</span></span>
   <span class="rwd-line"><i class="fi flaticon-phone"></i>+62 878 0878 3630</span>
</h4>

我试过了：

1. 在每个nowrap
中添加<span class="visible-lg">属性
2. 在我的css中添加white-space: nowrap;
3. 添加 个实体

但以上都没有解决我的问题。

P.S：我仍然需要&bull个实体出现在桌面显示器上

这是复制并粘贴jsfiddle @Hastig为我提供的结果：

Answer 1

you need to declare the media query last, like this:

.rwd-line {
    display: block;
}

@media screen and (min-width: 768px) {
    .rwd-line {
        display: inline;
        white-space: nowrap;
    }
}

https://jsfiddle.net/xcnswLwb/

Answer 2

更改显示：阻止;显示：内联块;或尝试一次。

.rwd-line {
    display: inline-block;
    white-space: nowrap;
}

Answer 3

答案可能在于你的可见lg类，这是你想要发生的吗？

（查看全屏并调整窗口宽度）

＆＃13;

＆＃13;

.text-center {
  text-align: center;
}
.rwd-line {
  display: block;
}
.visible-lg {
  display: none; 
}
@media (min-width: 768px) {
  .rwd-line {
    display: inline-block;
    white-space: nowrap;
  }
  .visible-lg {
    display: inline-block;
    padding-left: 5px;
  }
}

＆＃13;

<div class="text-center">
   <span class="rwd-line">&copy;<?php echo date('Y') ?> PT Paket Informasi Digital<span class="visible-lg">&bull;</span></span>
   <span class="rwd-line"><a href="https://blog.paket.id" target="_blank">Blog</a><span class="visible-lg">&bull;</span></span>
   <span class="rwd-line"><a href="https://docs.paket.id" target="_blank">Documentation</a><span class="visible-lg">&bull;</span></span>
   <span class="rwd-line"><i class="fi flaticon-phone"></i>+62 878 0878 3630</span>
</div>

＆＃13;

＆＃13;

＆＃13;

<强>拨弄

https://jsfiddle.net/Hastig/sbub2zrv/