用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将新单词推到新行

回答

相关问题