html - 空白 : nowrap not working

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. 添加white-space: nowrap;在我的 CSS 中
3. 添加 实体

但以上都不能解决我的问题。

附言:我仍然需要 &bull要出现在桌面显示器上的实体

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

Answer 1

答案可能在于您的 visible-lg 类，这是您想要发生的吗？

(查看全屏并调整窗口宽度)

.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;
  }
}

<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>

fiddle

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