web-dev-qa-db-fra.com

Envelopper toute la durée sur une nouvelle ligne si elle ne correspond pas

J'ai deux divs d'enfant 20% et 80%. Le dernier contient spans imbriqués et dans le cas où le texte ne tient pas sur la même ligne, il est déplacé sur la ligne suivante par un seul mot (comportement par défaut).

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

Mais je dois obtenir le résultat suivant si le texte dans span ne correspond pas à la ligne déplacer toute la gamme à la ligne suivante.

J'ai déjà essayé:

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

Cela ne déplace pas le texte vers la ligne suivante, mais réduit d'abord div afin d'obtenir de l'espace libre pour le texte et ce n'est pas un comportement souhaitable.

enter image description hereenter image description here

Et je veux réaliser:

enter image description here

Est-il possible d'obtenir un tel résultat en utilisant uniquement CSS?

htmlcsscss3responsive-design
17
CROSP

Le <span> la balise est en ligne par défaut, donc le texte à l'intérieur se cassera lorsque l'habillage se produit. Vous pouvez le définir sur display: inline-block pour qu'il soit rendu dans son intégralité, le niveau reste également en ligne. Remarque, l'habillage peut toujours se produire, mais uniquement si la longueur du texte dépasse le conteneur parent.

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

display: inline-block L'élément génère une boîte d'élément de bloc qui sera diffusée avec le contenu environnant comme s'il s'agissait d'une seule boîte en ligne (se comportant un peu comme le ferait un élément remplacé) - MDN

Et pour la mise en page que vous essayez de réaliser, vous pouvez envelopper le texte "En savoir plus" dans un <a> tag, et définissez le style de lien du bouton à la place de la cellule du tableau, voir la démo mise à jour ci-dessous.

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>

Vous remarquerez peut-être le même margin mais l'espacement gauche/droite et l'espacement haut/bas ne sont pas les mêmes dans l'exemple, suivez ce message si vous en avez besoin pour être parfait au pixel près.

[~ # ~] mise à jour [~ # ~]

Il existe une meilleure façon de le faire, c'est CSS3 flexbox , consultez l'extrait ci-dessous.

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>
17
Stickers

Essaye ça:

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

Un élément inline-block Est une unité qui reste toujours un bloc (mais dans le flux de texte), qui ne peut être déplacée que dans son ensemble et ne pas être divisée.

7
Johannes

Vous utilisez display: table, et le comportement du redimensionnement de vos divs est dû à cela. Je vous conseille de changer votre affichage en inline-block comme indiqué dans la réponse ci-dessus et en l'alignant verticalement sur line-height

2
Kiss