may may - 3 months ago 15
CSS Question

white-space: nowrap not working

I have footer with

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

mobile screen

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

desktop display

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
    &nbsp;
    entities



but none of the above resolve my problem.

P.S : 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:

jsfiddle copy and paste

Answer

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/