2016-12-28 172 views
1

下面是代碼,有沒有辦法阻止「發送」字從斷線?我無法將p標籤更改爲span,因爲動畫無效。p標記後防止斷線

.loader { 
 
    border: 16px solid #f3f3f3; 
 
    border-radius: 50%; 
 
    border-top: 16px solid blue; 
 
    border-right: 16px solid green; 
 
    border-bottom: 16px solid red; 
 
    width: 60px; 
 
    height: 60px; 
 
    -webkit-animation: spin 2s linear infinite; 
 
    animation: spin 2s linear infinite; 
 
} 
 
@-webkit-keyframes spin { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    } 
 
} 
 
@keyframes spin { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}
<p class="loader"></p> <span style="white-space:nowrap;"> Sending . . . </span>

+1

這是'空白:nowrap'(不是'不-wrap') –

+1

感謝kukkuz的幫助。這裏是代碼,使用它:http://www.w3schools.com/code/tryit.asp?filename=FB7OGYQP0U3R – csandreas1

回答

2

一種選擇是創建一個包裝pspan,並使其成爲Flexbox的 - 看演示如下:

.wrapper { 
 
    display: flex; 
 
    align-items:center; 
 
} 
 
.loader { 
 
    border: 16px solid #f3f3f3; 
 
    border-radius: 50%; 
 
    border-top: 16px solid blue; 
 
    border-right: 16px solid green; 
 
    border-bottom: 16px solid red; 
 
    width: 60px; 
 
    height: 60px; 
 
    -webkit-animation: spin 2s linear infinite; 
 
    animation: spin 2s linear infinite; 
 
} 
 
@-webkit-keyframes spin { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    } 
 
} 
 
@keyframes spin { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}
<div class="wrapper"> 
 
    <p class="loader"></p> <span> Sending . . . </span> 
 
</div>

+0

另一種選擇是創建100個包裝和替代顯示'table','flex','block '和'inline-block'在不同的級別。如果你只想讓它不包裝,你爲什麼要把一些東西包裝在「flexbox」容器中? –

+0

嘿男人,我只給了*一個選項! :D – kukkuz

+1

那裏有這麼多的HTML屬性..我不知道flex,這是訣竅。 – csandreas1

0

試試這個:

.loader{ 
    float: left; 
} 
0

我認爲ü慣於做這樣


這裏的CSS代碼

span { 
    left: 29px; 
    position: absolute; 
    top: 50px; 
} 
+0

編輯你的代碼.. – csandreas1

+0

謝謝你們,這是運作良好 –

+0

不,它不。內容顯示不正確,您可以在代碼編輯器中發佈您的工作的完整代碼,看看您在做什麼 – csandreas1