p標記後防止斷線

下面是代碼，有沒有辦法阻止「發送」字從斷線？我無法將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>

來源

2016-12-28 csandreas1

這是'空白：nowrap'（不是'不-wrap'） –

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

一種選擇是創建一個包裝爲p和span，並使其成爲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>

來源

2016-12-28 10:11:55 kukkuz

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

嘿男人，我只給了*一個選項！：D – kukkuz

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

試試這個：

.loader{ 
    float: left; 
}

來源

2016-12-28 10:10:48 Taniya

我認爲ü慣於做這樣

這裏的CSS代碼

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

來源

2016-12-28 10:15:41

編輯你的代碼.. – csandreas1

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

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

p標記後防止斷線

回答

相關問題