文本无法在HTML中正确显示

时间：2016-11-12 04:54:31

标签： html css

我的＆＃34;请等待＆＃34;文字正在打破＆＃34;请＆＃34;。我想把它显示为一个完整的句子。我尝试了很多，但我的所有尝试都失败了。我该如何解决这个问题？

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

6 个答案:

答案 0 :(得分：0)

让你的h3更宽

h3 {
  width: 150px;
}
.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>

答案 1 :(得分：0)

下面的更改，您的代码将完美运行：

.loading {
    width: 103px;
    height: 101px;
    margin: auto;
    position: fixed;
    z-index: 999;
    overflow: show;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

答案 2 :(得分：0)

只需添加.loading

的宽度即可 
.loading {
  width: 120PX;
....
}


.loading {
  width: 120PX;
  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>

答案 3 :(得分：0)

将white-space: nowrap;添加到h3以解决您的问题

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

答案 4 :(得分：0)

你的判决被打破的原因仅仅是因为没有足够的空间。您在.nextInt上设置了一个宽度，即.loading，可以使其宽度更大或删除宽度声明。

答案 5 :(得分：0)

.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

将背景颜色更改为background-color: rgba(0, 0, 0, 0.2);

在IE上显示文字，但背景太暗，黑色文字。

相关问题
最新问题