html - 使用 CSS 将单词推到新行

Question

我有以下场景，如果超过框的宽度，我需要将整个单词推到新行。我使用 CSS3 word-wrap 属性来实现这一点。但它打破了这个词，如下所示。

如果文本更多，我不想打断一个单词并将整个单词推到下一行。

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;
}

Answer 1

如前所述on this question ，您可以删除自动换行本身

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