Wrap the entire range on a new line if it doesn't fit

Question

I have two child divs of 20% and 80%. The latter contains a nested span , and if the text does not fit on one line, it moves on the next line in one 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 the following result, if the text in the run does not match the line, move the entire range to the next line.

I have already tried:

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

This does not move the text to the next line, but makes a smaller div to get free space for the text, and this is undesirable.

And I want to achieve:

Is it possible to get such a result using only CSS?

Answer 1

The <span> tag is inline by default, so the text inside will be interrupted when the transfer is complete. You can set it to display: inline-block so that it displays as a whole block, also remains inline. Please note: packaging may still occur, but only if the text is longer than the parent container.

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

display: inline-block The element generates a block element that will flow with the surrounding content, as if it were one inline box (behaved like a replaced element) - MDN

And for the layout you are trying to achieve, you can wrap the text "Read more" in the <a> tag and set the link style to 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 that given the same margin , but the distance between left / right and top / bottom distance do not match in the example, follow this entry if you want it to be a perfect pixel.

UPDATE

There is a better way to do this, this is CSS3 flexbox , see 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> 

Answer 2

Try the following:

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

An inline-block element is a unit that always remains a block (but inside a text stream) that can only be moved as a whole and not divided.

Answer 3

You use display: table , and because of this, the behavior of changing your divs changes. I would advise changing your display to inline-block , as mentioned above, and aligning it vertically through line-height