2016-11-12 55 views
-2

我的「please wait」文本正從「please」中斷。我想把它顯示爲一個完整的句子。我嘗試了很多,但我的所有嘗試都失敗了。我該如何解決這個問題?文本在HTML中不能正確顯示

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

+0

你想如何顯示文本。請解釋。 – captainsac

+0

現在它顯示喜歡,然後打破,然後等待。我想在不中斷的情況下顯示全文。 –

回答

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 { 
 
    \t 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>

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>

0

變化在下面,你的代碼將很好地工作:

.loading { 
    width: 103px; 
    height: 101px; 
    margin: auto; 
    position: fixed; 
    z-index: 999; 
    overflow: show; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 
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>

0

你的句子打破的原因僅僅是因爲沒有足夠的空間。您在.loading上設置了一個寬度,即.loading {width: 100px},可以將其設置爲更大的寬度或刪除寬度聲明。

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瀏覽器中的文本顯示,但背景是黑色文本太暗。