用CSS將新單詞推到新行

我有以下場景，如果超過框的寬度，我需要將整個單詞推到新行。我已經使用CSS3 自動換行屬性來實現這一點。但它打破瞭如下所示的單詞。用CSS將新單詞推到新行

我想不會打破字，推動整個單詞到下一行文本是否爲多。

HTML

<div class="container"> 
    <div class="img-container"> 
     <img class="img-icon" src="/icons/image1.png"> 
    </div> 
    <p class="icon-footer">Performance Validator</p> 
</div>

CSS

.container { 
    position: absolute; 
    align-items: flex-start; 
    text-align: center; 
    box-sizing: border-box; 
    outline: 0; 
    display: flex; 
    flex-direction: column; 
} 
.container img-container { 
    display: flex; 
} 
.container .img-container .img-icon { 
    border:1px solid #000; 
    height: 64px; 
    width: 64px; 
    outline: 0; 
} 
.icon-footer { 
    margin: 0; 
    width: 64px; 
    color: #000; 
    font-size: 13px; 
    white-space: normal; 
    line-height: 1.5; 
    word-wrap: break-word; 
}

來源

2017-03-02 Shareer

刪除自動換行 –

如前所述on this question，你可以刪除自動換行本身

.icon-footer { 
    margin: 0; 
    width: 64px; 
    color: #000; 
    font-size: 13px; 
    white-space: normal; 
    line-height: 1.5; 
}

來源

2017-03-02 06:08:10 Swellar

可以實現它沒有USI ng word-wrap: break-word屬性。默認情況下，該單詞將從默認屬性的父容器中溢出。

word-wrap: break-word當沒有找到足夠的空間時，屬性將該單詞分解爲下一行。

來源

2017-03-02 06:25:02 Ansh

用CSS將新單詞推到新行

回答

相關問題