Push the word to new line with CSS

Question

I have the the following scenario where i need to push the entire word to the new line if it exceeds the width of the box. i have used CSS3 word-wrap property to achieve this. but it breaks the word as shown below.

I would like not to break a word and push the entire word to the next line if the text is more.

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

score 0 · Answer 1 · edited May 23 '17 at 10:29

0

As stated on this question, you could remove the word-wrap itself

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

edited May 23 '17 at 10:29

Community

1
1

answered Mar 02 '17 at 06:08

Carl Binalla

5,393
5
27
46

score 0 · Answer 2 · answered Mar 02 '17 at 06:25

You can achieve it without using word-wrap: break-word property. By default the word will overflow out of the parent container which is the default property.

word-wrap: break-word property breaks the word to next line when it doesn't find ample amount of space.

Push the word to new line with CSS

2 Answers2