web-dev-qa-db-fra.com

l'élément flexible déborde du conteneur en raison de la longueur de Word, même après l'utilisation de Word Wrap

<div class="parent">
   <div class="child1">
     question
   </div>
  <div class="child2">
  somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething

<div class="parent">
  <div class="child1">
    question
  </div>
  <div class="child3">
   somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething
  </div>
</div>

[~ # ~] css [~ # ~] 

.parent{
  width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  padding:1em;
  background-color:red;
  box-sizing:border-box;
}
.child1{
  background-color:mistyrose;
  padding:1em;
}

.child2{
  background-color:powderblue;
  padding:.5em;
  Word-wrap:break-Word;
  max-width:500px;
}
.child3{
  background-color:powderblue;
  padding:.5em;
  Word-wrap:break-Word;

}

Le problème principal avec le code ci-dessus est, child3 déborde mais si je donne un max-width dans child2it ne dépassera pas le parent. Dans les deux cas, j'ai utilisé Word-wrap: break-Word;

Vous pouvez vérifier le code ici http://jsfiddle.net/vbj10x4k/

J'ai besoin de savoir pourquoi cela se produit et comment le résoudre sans utiliser max-width/width à des valeurs de pixels fixes. J'ai besoin qu'il soit réactif .

htmlcsscss3responsive-designflexbox
40
Sachin

Au lieu de définir une largeur maximale pour votre élément flexible, utilisez une déclaration de largeur minimale.

Par défaut, si aucune largeur minimale n'est définie, la largeur minimale du contenu de l'élément est supposée et la largeur de l'élément flexible ne sera jamais plus petite. En définissant une largeur minimale de par ex. 40%, l'élément se réduira à au plus 40% du parent flexible.

.child2, .child3 {
  min-width: 40%;
}

.parent{
  width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  padding:1em;
  background-color:red;
  box-sizing:border-box;
}
.child1{
  background-color:mistyrose;
  padding:1em;
}
.child2{
  background-color:powderblue;
  padding:.5em;
  Word-wrap: break-Word;
  overflow-wrap: break-Word;
  min-width: 40%;
}
.child3{
  background-color:lightyellow;
  padding:.5em;
  Word-wrap: break-Word;
  overflow-wrap: break-Word;
  min-width: 40%;
}
<div class="parent">
  <div class="child1">
    question
  </div>
  <div class="child2">
   somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething

  </div>
  <div class="child3">
    Works well with long URLs: <a href="#"> https://thisisadamnlongurlcontainingneitherhyphensoradditionalperiods.com</a>
  </div>
</div>

Voir l'extrait de code ci-dessus ou la démo externe: http://jsfiddle.net/vbj10x4k/5/

68
Paul

Au lieu de Word-wrap:break-Word utilisation Word-break:break-all

[~ # ~] css [~ # ~] 

.child1{
  background-color:mistyrose;
  padding:1em;
  Word-break:break-all;
}
.child2{
  background-color:powderblue;
  padding:.5em;
  max-width:500px;
  Word-break:break-all;
}
.child3{
  background-color:powderblue;
  padding:.5em;
  Word-break:break-all;

}

voici le lien de violon de travail http://jsfiddle.net/yudi/vbj10x4k/3/

26
Gaurav Aggarwal

J'utilise une combinaison comme celle-ci et elle fonctionne pour moi sur Chrome, Safari et Firefox.

.myOverflowableText {
  Word-break: break-Word; /* Chrome, Safari */
  overflow-wrap: anywhere; /* Firefox */
}

Ce site dit que Word-break est pris en charge sur Chrome & Safari https://caniuse.com/#feat=Word-break .

Mais j'ai trouvé que la solution de Firefox devrait être overflow-wrap: anywhere sur ce site: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

Je ne suis pas sûr de IE encore ... Peut-être Word-wrap: break-Word; fonctionne sur IE?

Mon objectif est le suivant:

Hello this is some |
text. I am writing |
some text.         |
Especially long    |
words go to the    |
next line like     |
this. This is a    |
veryveryveryveryve |
ryveryverylongword |
.                  |
0
Rock Lee