Shah Rushabh Shah Rushabh - 26 days ago 8
CSS Question

text is not displaying properly in HTML

My "please wait" text is breaking from "please". I want to display it as a full sentence. I tried a lot but my all try is failed. How can I resolve this issue?



.loading {
width: 100PX;
height: 100PX;
margin: auto;
position: fixed;
z-index: 999;
overflow: show;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
}
.l_main {
position: relative;
width: 100%;
height: 100%;
text-align: center;
}
@-webkit-keyframes hei {
0% {
height: 0%;
width: 0%;
}
50% {
width: 100%;
height: 100%;
}
100% {
height: 0%;
width: 0%;
}
}
@-webkit-keyframes rot {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(0);
}
}
.l_main {
border-radius: 50%;
overflow: hidden;
-webkit-animation: rot 3s linear infinite;
}
.l_main .quater {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.l_main .circle {
position: absolute;
background-color: #3d9bb5;
-webkit-animation: hei 3s linear infinite;
border-radius: 50%;
display: inline-block;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
z-index: 5;
}
.l_main .quater {
z-index: 10;
}
.quater span {
display: inline-block;
width: 50%;
height: 50%;
clear: both;
background-color: white;
}
.quater .top {
float: right;
}
.quater .bottom {
float: left;
}

<div class="loading">
<h3 style="color:#000">Please wait...</h3>
<div class="l_main">
<div class="circle"></div>
<div class="quater">
<span class="top"></span>
<span class="bottom"></span>
</div>
</div>
</div>




Ali Ali
Answer

add white-space: nowrap; to h3 to fix your problem

.loading {
  width: 100PX;
  height: 100PX;
  margin: auto;
  position: fixed;
  z-index: 999;
  overflow: show;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}
.loading h3 {
  	white-space: nowrap;
 }
.l_main {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
}
@-webkit-keyframes hei {
  0% {
    height: 0%;
    width: 0%;
  }
  50% {
    width: 100%;
    height: 100%;
  }
  100% {
    height: 0%;
    width: 0%;
  }
}
@-webkit-keyframes rot {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0);
  }
}
.l_main {
  border-radius: 50%;
  overflow: hidden;
  -webkit-animation: rot 3s linear infinite;
}
.l_main .quater {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.l_main .circle {
  position: absolute;
  background-color: #3d9bb5;
  -webkit-animation: hei 3s linear infinite;
  border-radius: 50%;
  display: inline-block;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: 5;
}
.l_main .quater {
  z-index: 10;
}
.quater span {
  display: inline-block;
  width: 50%;
  height: 50%;
  clear: both;
  background-color: white;
}
.quater .top {
  float: right;
}
.quater .bottom {
  float: left;
}
<div class="loading">
  <h3 style="color:#000">Please wait...</h3>
  <div class="l_main">
    <div class="circle"></div>
    <div class="quater">
      <span class="top"></span>
      <span class="bottom"></span>
    </div>
  </div>
</div>