空格：nowrap无法正常工作

Question

I have footer with <span> element. In mobile screen (which I expected):

Desktop display (should not break into a new line) :

My HTML and 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> 

I have tried:

1. adding nowrap attribute in every <span class="visible-lg">
2. adding white-space: nowrap; in my css
3. adding   entities

but none of the above resolve my problem.

PS : I still need the &bull entities to be appear on desktop display

This is the result from copy and paste the jsfiddle @Hastig provided me:

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

Change display:block; to display:inline-block; OR Try It Once .

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

Answer 3

The answer may lie with your visible-lg class, is this what you want to happen?

(view full screen and adjust width of 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/