Wrap entire span on new line if doesn't fit

Question

I have two child divs 20% and 80%. The last one contains nested spans and in case of text doesn't fit on the same line it is moved on the next line by single word (default behavior).

HTML:

<div class="post-short-footer">    <div class="read-more-post"></div>    <div class="post-short-meta-container">       <span class="posted-on"><i class="fa fa-calendar" aria-hidden="true">Some text</i></span>       <span class="cat-links"><i class="fa fa-folder-open-o" aria-hidden="true"></i>Some text</span>       <span class="comments-link"><i class="fa fa-comment-o" aria-hidden="true"></i></span>    </div> </div> 

CSS:

.post-short-footer {     display: table;     width: 100%; } .read-more-post {     height: 100%;     display: table-cell;     vertical-align: middle;         width: 20%;     padding: 0.6em 0.6em;     border-radius: 0.3em;     text-align: center;     border: 1px solid #3b9be5; } .post-short-meta-container {     display: table-cell;     padding-left: 1em;     width: 80%;     line-height: 100%;     vertical-align: middle;     height: 100%; } 

But I need to achieve next result if text in span doesn't fit the line move whole span to the next line.

I already tried:

.post-short-meta-container span {     white-space: nowrap; } 

This doesn't move text to the next line instead it makes first div smaller in order to get free space for text and this is not desirable behavior.

And I want to achieve:

Is it possible to get such result using only CSS?

Answer 1

The <span> tag is inline by default, so the text inside will break when wrapping happens. You can set it to display: inline-block so that it renders as a whole block also remains inline level. Note, wrapping may still happen but only if the text length exceeds the parent container.

.post-short-meta-container span {   ...   display: inline-block; } 

display: inline-block The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would) - MDN

And for the layout you're trying to achieve, you can wrap the text "Read more" into a <a> tag, and set the button link style on it instead of the table cell, see the updated demo below.

jsFiddle

.post-short-footer {    display: table;    width: 100%;  }  .read-more-post {    height: 100%;    display: table-cell;    vertical-align: middle;    width: 20%;    text-align: center;  }  .read-more-post a {    white-space: nowrap;    border: 1px solid #3b9be5;    padding: 0.6em 0.6em;    border-radius: 0.3em;    display: block;  }  .post-short-meta-container {    display: table-cell;    padding-left: 1em;    width: 80%;    line-height: 100%;    vertical-align: middle;    height: 100%;  }  .post-short-meta-container span {    display: inline-block;    padding: 0.3em;    margin: 0.3em;    border: 1px dotted red;  }

<div class="post-short-footer">    <div class="read-more-post">      <a href="#">Read more</a>    </div>    <div class="post-short-meta-container">      <span>Some text here</span>      <span>Some text here</span>      <span>Some text here</span>      <span>Some text here</span>      <span>Some text here</span>    </div>  </div>

You may notice given the same margin but the left/right spacing and top/bottom spacing is not the same in the example, follow this post if you need it to be pixel perfect.

UPDATE

There is a better way to do it, that is CSS3 flexbox, check out the snippet below.

jsFiddle

.post-short-footer {    display: flex;  }    .read-more-post {    display: flex;    align-items: center;  }    .read-more-post a {    border: 1px solid #3b9be5;    padding: 0.6em 0.6em;    border-radius: 0.3em;    white-space: nowrap;    margin-right: 10px;  }    .post-short-meta-container {    flex: 1;    display: flex;    flex-wrap: wrap;    align-items: center;  }    .post-short-meta-container span {    padding: 0.3em;    margin: 0.3em;    border: 1px dotted red;  }

<div class="post-short-footer">    <div class="read-more-post">      <a href="#">Read more</a>    </div>    <div class="post-short-meta-container">      <span>Some text here</span>      <span>Some text here</span>      <span>Some text here</span>      <span>Some text here</span>      <span>Some text here</span>    </div>  </div>