使用 CSS 将单词推送到新行答案

【问题标题】：Push the word to new line with CSS使用 CSS 将单词推送到新行
【发布时间】：2017-03-02 06:01:17
【问题描述】：

我有以下情况，如果它超过框的宽度，我需要将整个单词推到新行。我使用 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;
}

【问题讨论】：

标签： html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您可以在不使用word-wrap: break-word 属性的情况下实现它。默认情况下，单词会从默认属性的父容器溢出。

word-wrap: break-word 属性在找不到足够空间时将单词换到下一行。

【讨论】：