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?

Stickers · Accepted Answer · 2018-02-13T15:19:29.880

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>

Johannes · Answer 2 · 2016-06-27T14:34:01.247

11

Try this:

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

An inline-block element is a unit that always remains a block (but within the text flow), which can only be moved as a whole and not be divided.

edited Jun 27 '16 at 14:34

answered Jun 27 '16 at 14:28

Johannes

64,305
18
73
130

score 3 · Answer 3 · answered Jun 27 '16 at 14:32

3

You are using display: table, and the behavior of resizing your divs are because of that. I would advise to change your display to inline-block as said on the answer above and vertical aligning it through line-height

answered Jun 27 '16 at 14:32

Kiss

896
1
10
14

Wrap entire span on new line if doesn't fit

3 Answers3

Linked