Tekst w kontenerze elastycznym nie jest zawijany w IE11

176

Rozważ następujący fragment:

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

W przeglądarce Chrome tekst jest zawijany zgodnie z oczekiwaniami:

wprowadź opis obrazu tutaj

Ale w IE11 tekst się nie zawija :

wprowadź opis obrazu tutaj

Czy to znany błąd w IE? (jeśli tak, wskaźnik zostanie doceniony)

Czy istnieje znane obejście?


To podobne pytanie nie ma jednoznacznej odpowiedzi i oficjalnej wskazówki.

Misha Moroshko
źródło
1
Problem znika po usunięciu align-items: centerelementu nadrzędnego. Wydaje się, że to jest przyczyną tego
Nathan Perrier

Odpowiedzi:

280

Dodaj to do swojego kodu:

.child { width: 100%; }

Wiemy, że dziecko na poziomie bloku ma zajmować całą szerokość rodzica.

Chrome to rozumie.

IE11, z jakiegokolwiek powodu, żąda wyraźnego żądania.

Używanie flex-basis: 100%lub flex: 1też działa.

Uwaga: czasami konieczne będzie posortowanie różnych poziomów struktury HTML, aby określić, do którego kontenera pobierany jest plik width: 100%. Zawijany tekst CSS nie działa w IE

Michael Benjamin
źródło
13
Musiałem dodać szerokość: 100%; do rodzica. Wydaje się, że ten błąd ma różne poprawki w zależności od kontekstu. Westchnij IE!
Dennis Johnsen
8
Zamiast tego użyj „max-width: 100%” na .child.
Tyler
2
Tworzę tabelę za pomocą fleksa (każdy wiersz to flex, a jego dzieci mają flex: 1 1 50%; display: flex; align-items: center;:. Nic dziwnego, że IE nie działa podczas zawijania długich tekstów w komórkach. Ustawienie width:100%działa, ale min-width: 100%nie działa ! Powinno, ale tak nie jest. t (jak wszystkie rzeczy IE), więc spróbowałem max-width: 99%i zaskakująco, to robi pracę myślę użyciu. width:100%może być lepiej?
kumarharsh
1
Musiałem usunąć flex-direction: columnna rodzica, aby to zadziałało.
dman
1
Wydaje się, że ten problem dotyczy wyłącznie kolumn elastycznych. Nie dotyczy to elastycznych rzędów.
Drazen Bjelovuk
40

Miałem ten sam problem i chodzi o to, że element nie dostosowywał swojej szerokości do kontenera.

Zamiast używać width:100%, bądź konsekwentny (nie mieszaj modelu pływającego i modelu flex) i używaj flex, dodając to:

.child { align-self: stretch; }

Lub:

.parent { align-items: stretch; }

To zadziałało dla mnie.

Andry
źródło
2
Tak, ta odpowiedź też ma sens (i prawdopodobnie jest bardziej poprawna niż ta na szerokość). W jednym z moich projektów ustawienie szerokości: 100% nie jest możliwe i to rozwiązanie sprawdza się dobrze.
kumarharsh
11

Jak zasugerował Tyler w jednym z komentarzy tutaj, używając

max-width: 100%;

na dziecko może pracować (pracował dla mnie). Używanie align-self: stretchdziała tylko wtedy, gdy nie używasz align-items: center(co zrobiłem). width: 100%działa tylko wtedy, gdy nie masz wielu potomków w swoim flexboxie, które chcesz pokazać obok siebie.

koleś
źródło
max-width działała dla mnie, gdy została zastosowana do tego samego kontenera, w którym umieszczono align-items: flex-start.
Herms
7

Cześć ode mnie musiałem zastosować 100% szerokości do jego elementu dziadka. Nie jego elementy potomne.

.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;
}
Angus Grant
źródło
Miałem „width: auto;” na dziadków. Przejście na 100% naprawiło to dla mnie.
jensanity5000
2

Jakoś te wszystkie rozwiązania nie działały dla mnie. Widać wyraźnie błąd w IE flex-direction:column.

Działa dopiero po usunięciu flex-direction:

flex-wrap: wrap;
align-items: center;
align-content: center;
Fabian von Ellerts
źródło
0

Proponowane rozwiązania nie pomogły mi z ".child {width: 100%;}", ponieważ miałem bardziej skomplikowane znaczniki. Jednak znalazłem rozwiązanie - usuń "align-items: center;" i działa to również w tym przypadku.

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

Petr Varyagin
źródło
Nie musisz usuwać align-items: center. Zobacz stackoverflow.com/a/39365207/630170
kumarharsh
0

Jedynym sposobem, w jaki w 100% konsekwentnie udało mi się uniknąć tego błędu kolumny flex-direction, jest użycie zapytania o media o minimalnej szerokości w celu przypisania maksymalnej szerokości do elementu podrzędnego na ekranach o rozmiarze pulpitu.

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

Będziesz musiał ustawić naturalnie wbudowane elementy potomne (np. <span>Lub <a>) na coś innego niż inline (głównie display: block lub display: inline-block), aby poprawka działała.

Daniel Tonon
źródło
0

Nie znalazłem tutaj swojego rozwiązania, może komuś się przyda:

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

Powodzenia!

Robert Freund
źródło
0
.grandparent{
   display: table;
}

.parent{
  display: table-cell
  vertical-align: middle
}

To zadziałało dla mnie.

Shruti Agrawal
źródło
0

Ja też napotkałem ten problem.

Jedyną alternatywą jest zdefiniowanie szerokości (lub maksymalnej szerokości) w elementach potomnych. IE 11 jest trochę głupi, a ja poświęciłem 20 minut na zrealizowanie tego rozwiązania.

.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>
Thomas Aumaitre
źródło
-1

Miałem podobny problem z przepełnionymi obrazami w opakowaniu elastycznym.

Dodanie albo flex-basis: 100%;czy flex: 1;dziecku przepełnione fixed pracował dla mnie.

Saša Nikolič
źródło
To rozwiązanie zostało podane już lata temu i potrzebujemy tylko jednego, więc unikaj publikowania podwójnych odpowiedzi.
Ason
-4

Po co stosować skomplikowane rozwiązanie, jeśli proste też działa?

.child {
  white-space: normal;
}
Sergey Aldoukhov
źródło