Wickeln Sie die gesamte Spanne in eine neue Zeile, wenn dies nicht passt

Ich habe zwei untergeordnete Divs 20 % und 80 %. Der letzte enthält verschachtelt spans und falls der Text nicht in dieselbe Zeile passt, wird er um ein einzelnes Wort in die nächste Zeile verschoben (Standardverhalten).

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

Aber ich muss das nächste Ergebnis erzielen, wenn der Text in der Spanne nicht in die Zeile passt, verschieben Sie die ganze Spanne in die nächste Zeile.

Ich habe es schon versucht:

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

Dies verschiebt den Text nicht in die nächste Zeile, sondern macht ihn zuerst div kleiner, um Platz für Text zu schaffen, und das ist nicht wünschenswert.

Und ich möchte erreichen:

Ist es möglich, ein solches Ergebnis nur mit CSS zu erhalten?

Das <span> -Tag ist standardmäßig inline, sodass der darin enthaltene Text beim Umbruch unterbrochen wird. Sie können es einstellen display: inline-block damit es als ganzer Block gerendert wird, bleibt es auch auf Inline-Ebene. Beachten Sie, dass es immer noch zu einem Umbruch kommen kann, aber nur, wenn die Textlänge den übergeordneten Container überschreitet.

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

display: inline-block Das Element generiert eine Blockelement-Box, die mit umgebendem Inhalt umflossen wird, als wäre es eine einzelne Inline-Box (die sich ähnlich wie ein ersetztes Element verhält) – MDN

Und für das Layout, das Sie erreichen möchten, können Sie den Text “Weiterlesen” in ein umbrechen <a> -Tag und legen Sie den Schaltflächen-Link-Stil darauf anstelle der Tabellenzelle fest, siehe die aktualisierte Demo unten.

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>

Sie können das gleiche feststellen margin aber der linke/rechte Abstand und der obere/untere Abstand sind im Beispiel nicht gleich, folgen Sie diesem Beitrag, wenn es pixelgenau sein soll.

AKTUALISIEREN

Es gibt einen besseren Weg, das zu tun, nämlich CSS3 Flexboxsehen Sie sich den Ausschnitt unten an.

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>

Versuche dies:

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

Ein inline-block Element ist eine Einheit, die immer ein Block bleibt (jedoch innerhalb des Textflusses), die nur als Ganzes verschoben und nicht geteilt werden kann.

Du benutzt display: table, und das Verhalten bei der Größenänderung Ihrer Divs sind darauf zurückzuführen. Ich würde raten, Ihre Anzeige zu ändern inline-block wie in der Antwort oben gesagt und vertikal durchrichten line-height