html - ie11 - l'oggetto flex trabocca dal contenitore a causa della parola lunga anche dopo aver usato il word-wrap



overflow-wrap (2)

Grazie alla risposta di Gaurav Aggarwal, sono stato in grado di risolvere lo stesso tipo di problema utilizzando la proprietà CSS:

word-break: break-word

https://src-bin.com

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

}

Il problema principale con il codice precedente è, child3 overflow, ma se fornisco una max-width in child2 non verrà child2 dal parent . In entrambi i casi ho usato word-wrap: break-word;

Puoi controllare il codice qui http://jsfiddle.net/vbj10x4k/

Ho bisogno di sapere perché succede e come risolverlo senza usare valori di max-width/width a pixel fissi. Ho bisogno che sia reattivo .


Answer #1

Invece del word-wrap:break-word usa 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;

}

ecco il collegamento funzionante di violino http://jsfiddle.net/yudi/vbj10x4k/3/





flexbox