1
votes

Comment pousser le texte enveloppé de bloc en ligne (après le saut de ligne) vers la droite?

Je suis confronté à un problème de développement de l'arborescence de répertoires, effectué via

, lorsque le texte d'un élément dépasse la largeur du conteneur.

J'utilise la bibliothèque antd react, donc je n'ai pas beaucoup de flexibilité dans le balisage html généré sans modifier le code des bibliothèques. Cependant, j'ai le contrôle sur la feuille de style.

Voici le balisage html, de quel composant Antd Tree Component génère (avec quelques modifications pour faciliter la lecture):

#container {
  width: 260px; background-color: #f1f1f1;
}

.myicon, .myTitle, ul, li {
  padding: 0;
  margin: 0;
}

.myicon {
    display: inline-block;
    width: 44px;
    line-height: 24px;
    text-align: center;
    vertical-align: top;
    float:left;
}

.myTitle {
    display: inline;
    line-height: 24px;
    vertical-align: top;
}

ul {
    list-style: none;
    height: 100%;
    box-sizing: border-box;
    font-size: 14px;
}

li {
    white-space: break-spaces;
}

Voici css actuel:

<div id="container">
  <ul>
    <li>
      <span class="myicon">
        <i aria-label="icon: down" class="anticon anticon-down ant-tree-switcher-icon"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i> 
      </span>
      <span class="myTitle">
        <span>Compliance, objectives and functional statments</span>
      </span>
    </li>
  </ul>
</div>

Fiddle: https: // jsfiddle .net / gLqosjmp / 6 /

Qu'ai-je essayé?

Rendre la myicon height absurdement grande, mais cela a un impact sur la suite
Modification de wrap et white-space et display des deux classes - mais je n'ai pas réussi à obtenir le résultat li >

Voici ce qu'il rend: Rendu actuel

Voici ce que je veux rendre: Rendu ciblé

html css antd layout

0 commentaires

3 Réponses :

1
votes

Vous pouvez y parvenir en ajoutant simplement display: flex à votre li

<div id="container">
  <ul>
    <li>
      <span class="myicon">
        <i aria-label="icon: down" class="anticon anticon-down ant-tree-switcher-icon"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i> 
      </span>
      <span class="myTitle">
        <span>Compliance, objectives and functional statments</span>
      </span>
    </li>
  </ul>
</div>

#container {
  width: 260px;
  background-color: #f1f1f1;
}

.myicon,
.myTitle,
ul,
li {
  padding: 0;
  margin: 0;
}

.myicon {
  display: inline-block;
  width: 44px;
  line-height: 24px;
  text-align: center;
  vertical-align: top;
  float: left;
}

.myTitle {
  display: inline;
  line-height: 24px;
  vertical-align: top;
}

ul {
  list-style: none;
  height: 100%;
  box-sizing: border-box;
  font-size: 14px;
}

li {
  /*The only change*/
  display: flex;
}

0 commentaires

2
votes

Si vous souhaitez que votre texte reste dans certaines limites, le moyen le plus simple peut être d'afficher les éléments en ligne (tels que vos travées ) sous forme de bloc au lieu d'être en ligne et de manipuler leurs largeurs et hauteurs. Ou vous pouvez simplement utiliser flex, assez simple, réglez simplement votre li sur display: flex .

Vous pouvez ensuite jouer avec flex-grow code> et d'autres propriétés enfants, voici une grande référence flexbox a>.

<div id="container">
  <ul>
    <li>
      <span class="myicon">
        <i aria-label="icon: down" class="anticon anticon-down ant-tree-switcher-icon"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i> 
      </span>
      <span class="myTitle">
        <span>Compliance, objectives and functional statments</span>
      </span>
    </li>
  </ul>
</div>

#container {
  width: 260px; background-color: #f1f1f1;
}

.myicon, .myTitle, ul, li {
  padding: 0;
  margin: 0;
}

.myicon {
    display: inline-block;
    width: 44px;
    line-height: 24px;
    text-align: center;
    vertical-align: top;
    float:left;
}

.myTitle {
    display: inline;
    line-height: 24px;
    vertical-align: top;
}

ul {
    list-style: none;
    height: 100%;
    box-sizing: border-box;
    font-size: 14px;
}

li {
    display: flex;
    white-space: break-spaces;
}

0 commentaires

0
votes

Vous pouvez changer .myTitle en inline-block et lui définir une largeur.

<div id="container">
  <ul>
    <li>
      <span class="myicon">
        <i aria-label="icon: down" class="anticon anticon-down ant-tree-switcher-icon"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i> 
      </span>
      <span class="myTitle">
        <span>Compliance, objectives and functional statments</span>
      </span>
    </li>
  </ul>
</div>

#container {
  width: 260px; background-color: #f1f1f1;
}

.myicon, .myTitle, ul, li {
  padding: 0;
  margin: 0;
}

.myicon {
    display: inline-block;
    width: 44px;
    line-height: 24px;
    text-align: center;
    vertical-align: top;
    float: left;
}

.myTitle {
    display: inline-block;
    line-height: 24px;
    vertical-align: top;
    width: 210px;
}

ul {
    list-style: none;
    height: 100%;
    box-sizing: border-box;
    font-size: 14px;
}

li {
    white-space: break-spaces;
}

0 commentaires