web-dev-qa-db-ja.com

ワードラップを使用した後でも、長いWordが原因でフレックスアイテムがコンテナをオーバーフローする

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

}

上記のコードの主な問題は、child3オーバーフローですが、max-widthでchild2を指定しても、parentはオーバーフローしません。どちらの場合も、Word-wrap: break-Word;を使用しました

ここでコードを確認できますhttp://jsfiddle.net/vbj10x4k/

max-width/widthを使用してピクセル値を固定せずにそれが発生する理由と解決方法を知る必要があります。応答する必要があります。

htmlcsscss3responsive-designflexbox
40
Sachin

フレックスアイテムの最大幅を設定する代わりに、最小幅の宣言を使用します。

デフォルトでは、最小幅が設定されていない場合、アイテムのコンテンツの最小幅が想定され、フレックスアイテムの幅は決して小さくなりません。最小幅を設定するなど。 40％、アイテムはフレックス親の最大40％に縮小します。

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

上記のコードスニペットまたは外部デモを参照してください： http://jsfiddle.net/vbj10x4k/5/

68
Paul

の代わりに Word-wrap:break-Word つかいます 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;

}

ここに作業フィドルリンクがあります http://jsfiddle.net/yudi/vbj10x4k/3/

26
Gaurav Aggarwal

このような組み合わせを使用していますが、Chrome、Safari、Firefoxで動作します。

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

このサイトでは、Chrome＆Safari https://caniuse.com/#feat=Word-break でWord-breakがサポートされています。

しかし、Firefoxのソリューションはoverflow-wrap: anywhereこのサイトでは： https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

IEまだ...おそらくWord-wrap: break-Word; IEで動作しますか？

私の目標はこれです：

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