white-space: 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>

我试过：

在每个 <span class="visible-lg">

nowrap

在我的 css

white-space: nowrap;

添加   个实体

但是上面的 none 解决了我的问题。

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

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

Answer 1

你需要最后声明媒体查询，像这样：

.rwd-line {
    display: block;
}

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

https://jsfiddle.net/xcnswLwb/

Answer 2

改变display:block；到 display:inline-块；或者尝试一次。

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

Answer 3

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

（查看全屏并调整 window 的宽度）

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

white-space: nowrap 不工作

white-space: nowrap not working

html

css

line-breaks