ข้อความใน flex container ไม่ได้ห่อใน IE11


176

พิจารณาตัวอย่างต่อไปนี้:

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
}
<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

ใน Chrome ข้อความจะถูกห่อตามที่คาดไว้:

ป้อนคำอธิบายรูปภาพที่นี่

แต่ใน IE11 ข้อความไม่ได้ห่อ :

ป้อนคำอธิบายรูปภาพที่นี่

นี่เป็นข้อบกพร่องที่รู้จักใน IE หรือไม่ (ถ้าใช่ตัวชี้จะได้รับการชื่นชม)

มีวิธีแก้ไขเฉพาะหน้าหรือไม่?


คำถามที่คล้ายกันนี้ไม่มีคำตอบที่ชัดเจนและตัวชี้อย่างเป็นทางการ


1
เป็นไปได้ที่ซ้ำกันของIE11 flexbox ที่ป้องกันการตัดข้อความ?
Simen S

1
ปัญหาหายไปเมื่อฉันลบออกalign-items: centerจากองค์ประกอบหลัก ดูเหมือนว่าจะเป็นสาเหตุของมัน
นาธานเพอร์ริเออร์

คำตอบ:


280

เพิ่มไปยังรหัสของคุณ:

.child { width: 100%; }

เรารู้ว่าเด็กระดับบล็อกควรจะครอบครองความกว้างเต็มของผู้ปกครอง

Chrome เข้าใจสิ่งนี้

IE11 ไม่ว่าด้วยเหตุผลใดก็ตามต้องการคำขอที่ชัดเจน

ใช้flex-basis: 100%หรือใช้flex: 1งานได้

หมายเหตุ: บางครั้งก็จะมีความจำเป็นในการจัดเรียงผ่านระดับต่างๆของโครงสร้าง HTML width: 100%ในการระบุที่ภาชนะที่ได้รับ CSS wrap text ไม่ทำงานใน IE


13
ฉันต้องเพิ่มความกว้าง: 100%; ถึงผู้ปกครอง ข้อผิดพลาดนี้ดูเหมือนว่าจะมีการแก้ไขต่าง ๆ ขึ้นอยู่กับบริบท ถอนหายใจ IE!
Dennis Johnsen

8
ให้ใช้ "ความกว้างสูงสุด: 100%" ใน. child
ไทเลอร์

2
ฉันกำลังสร้างตารางโดยใช้เฟล็กซ์ (แต่ละแถวเป็นเฟล็กซ์โดยที่ลูกมี: flex: 1 1 50%; display: flex; align-items: center;ไม่น่าแปลกใจที่ IE ล้มเหลวในขณะที่การตัดข้อความยาว ๆ ในเซลล์การตั้งค่าใช้width:100%งานได้ แต่การตั้งค่าmin-width: 100%ไม่ควร! ตัน (เหมือนทุกสิ่ง IE) ดังนั้นฉันพยายามmax-width: 99%และที่น่าแปลกใจก็ไม่ทำงานผมคิดว่าการใช้. width:100%อาจจะดีกว่า?
kumarharsh

1
ฉันต้องลบพาเรนต์flex-direction: columnนี้เพื่อให้ทำงานได้
dman

1
ดูเหมือนว่าปัญหานี้จะไม่ทำให้คอลัมน์งอ ไม่ได้เกิดขึ้นกับแถวที่ยืดหยุ่น
Drazen Bjelovuk

40

ฉันมีปัญหาเดียวกันและประเด็นก็คือองค์ประกอบไม่ได้ปรับความกว้างของมันไปยังคอนเทนเนอร์

แทนการใช้width:100%, มีความสอดคล้อง (ไม่ผสมรูปแบบลอยและรูปแบบเฟล็กซ์) และการใช้งานเฟล็กซ์โดยการเพิ่มนี้:

.child { align-self: stretch; }

หรือ:

.parent { align-items: stretch; }

สิ่งนี้ใช้ได้สำหรับฉัน


2
ใช่คำตอบนี้สมเหตุสมผลเช่นกัน (และอาจถูกกว่าความกว้าง) หนึ่งในงานออกแบบของฉันไม่สามารถตั้งค่าความกว้างได้: 100% และโซลูชันนี้ทำงานได้ดี
kumarharsh

11

ดังที่ไทเลอร์ได้แนะนำในหนึ่งในความคิดเห็นที่นี่โดยใช้

max-width: 100%;

ที่เด็กอาจทำงานได้ (ทำงานให้ฉัน) ใช้align-self: stretchงานได้เฉพาะถ้าคุณไม่ได้ใช้align-items: center(ซึ่งฉันทำ) width: 100%ใช้งานได้เฉพาะในกรณีที่คุณไม่มีลูกหลายคนในเฟล็กบ็อกซ์ซึ่งคุณต้องการแสดงแบบเคียงข้างกัน


ความกว้างสูงสุดใช้งานได้สำหรับฉันเมื่อนำไปใช้กับคอนเทนเนอร์เดียวกันที่จัดวางรายการ: เริ่มการทำงานแบบยืดหยุ่น
Herms

7

สวัสดีสำหรับฉันฉันต้องใช้ความกว้าง 100% กับองค์ประกอบความกว้างใหญ่ของมัน ไม่ใช่องค์ประกอบย่อย

.grandparent {
    float:left;
    clear: both;
    width:100%; //fix for IE11 text overflow
}

.parent {
    display: flex;
    border: 1px solid red;
    align-items: center;
}

.child {
    border: 1px solid blue;
}

ฉันมี "width: auto" บนปู่ย่าตายาย เปลี่ยนเป็น 100% แก้ไขสิ่งนี้สำหรับฉัน
jensanity5000

2

ยังไงก็เถอะโซลูชันเหล่านี้ทั้งหมดไม่ได้ผลสำหรับฉัน มีข้อผิดพลาด IE อย่างชัดเจนflex-direction:columnมีข้อผิดพลาดอย่างชัดเจนใน

ฉันแค่ทำให้มันทำงานหลังจากลบflex-direction:

flex-wrap: wrap;
align-items: center;
align-content: center;

0

วิธีแก้ปัญหาที่เสนอไม่ได้ช่วยฉันด้วย ".child {width: 100%;}" เนื่องจากฉันมีมาร์กอัปที่ซับซ้อนมากขึ้น อย่างไรก็ตามฉันพบวิธีแก้ปัญหา - ลบ "align-items: center;" และใช้งานได้กับกรณีนี้ด้วย

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  /*align-items: center;*/
}
.child {
  border: 1px solid blue;
}
<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>


align-items: centerคุณไม่จำเป็นต้องลบ ดูstackoverflow.com/a/39365207/630170
kumarharsh

0

วิธีเดียวที่ฉันมี 100% อย่างต่อเนื่องสามารถหลีกเลี่ยงข้อผิดพลาดคอลัมน์ flex-direction นี้คือการใช้เคียวรีสื่อบันทึกความกว้างต่ำสุดเพื่อกำหนดความกว้างสูงสุดให้กับองค์ประกอบย่อยบนหน้าจอขนาดเดสก์ท็อป

.parent {
    display: flex;
    flex-direction: column;
}

//a media query targeting desktop sort of sized screens
@media screen and (min-width: 980px) {
    .child {
        display: block;
        max-width: 500px;//maximimum width of the element on a desktop sized screen
    }
}

คุณจะต้องตั้งค่าองค์ประกอบอินไลน์ตามธรรมชาติ (เช่น. <span>หรือ<a>) เป็นอย่างอื่นนอกเหนือจากอินไลน์ (ส่วนใหญ่จะแสดง: บล็อกหรือแสดง: อินไลน์บล็อก) เพื่อให้การแก้ไขทำงานได้


0

ฉันไม่พบวิธีแก้ไขปัญหาของฉันที่นี่อาจมีบางคนที่มีประโยชน์:

.child-with-overflowed-text{
  word-wrap: break-all;
}

โชคดี!



0

ฉันก็พบปัญหานี้เช่นกัน

ทางเลือกเดียวคือการกำหนดความกว้าง (หรือความกว้างสูงสุด) ในองค์ประกอบลูก IE 11 ค่อนข้างโง่และฉันใช้เวลาเพียง 20 นาทีในการแก้ไขปัญหานี้

.parent {
  display: flex;
  flex-direction: column;
  width: 800px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
  max-width: 800px;
  @media (max-width:960px){ // <--- Here we go. The text won't wrap ? we will make it break !
    max-width: 600px;
  }
  @media (max-width:600px){
    max-width: 400px;
  }
  @media (max-width:400px){
    max-width: 150px;
  }
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

-1

ฉันมีปัญหาที่คล้ายกันกับภาพล้นในเสื้อคลุมดิ้น

การเพิ่มอย่างใดอย่างหนึ่งflex-basis: 100%;หรือflex: 1;ให้กับเด็กที่ล้นลงไปนั้นทำให้ฉันทำงานได้


โซลูชันนี้มีให้แล้วเมื่อหลายปีก่อนและเราต้องการเพียงหนึ่งวิธีเท่านั้นดังนั้นหลีกเลี่ยงการโพสต์คำตอบที่ซ้ำกัน
Ason

-4

เหตุใดจึงต้องใช้วิธีแก้ปัญหาที่ซับซ้อนถ้าแบบง่าย ๆ ใช้ได้เช่นกัน?

.child {
  white-space: normal;
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.