플렉스 컨테이너의 텍스트가 IE11에서 랩되지 않음

플렉스 컨테이너의 텍스트가 IE11에서 랩되지 않음

다음 스니펫을 고려해 보십시오.

.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에서 알려진 버그입니까? (만약 그렇다면 포인터가 감사할 것입니다.)

알려진 해결 방법이 있습니까?

---

이 비슷한 질문에는 확답과 공식적인 지침이 없습니다.

코드에 추가합니다.

.child { width: 100%; }

우리는 블록 수준의 아이가 부모의 전체 너비를 차지해야 한다는 것을 알고 있습니다.

Chrome은 이것을 이해합니다.

IE11은 어떤 이유로든 명시적인 요청을 원합니다.

사용.flex-basis: 100%또는flex: 1작동하기도 합니다.

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
  width: calc(100% - 2px);       /* NEW; used calc to adjust for parent borders */
}

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

참고: 때때로 HTML 구조의 다양한 레벨을 정렬하여 어떤 컨테이너가 다음과 같은 성능을 갖는지 정확히 파악해야 합니다.width: 100%IE에서 CSS 줄 바꿈 텍스트가 작동하지 않음

저도 같은 문제가 있었는데 요점은 요소가 컨테이너에 폭을 조정하지 않고 있다는 것입니다.

사용하는 대신width:100%일관성을 유지하고(플로팅 모델과 플렉스 모델을 혼합하지 않음), 다음을 추가하여 플렉스를 사용합니다.

.child { align-self: stretch; }

또는:

.parent { align-items: stretch; }

이것은 저에게 효과가 있었습니다.

타일러가 여기 댓글 중 하나에서 제안했듯이,

max-width: 100%;

아이에게 효과가 있을 수 있습니다(나에게 도움이 됩니다).사용.align-self: stretch를 사용하지 않는 경우에만 작동합니다.align-items: center(내가 한 일)width: 100%플렉스 상자 안에 나란히 표시할 자식이 여러 개 없는 경우에만 작동합니다.

안녕하세요, 저는 조부모님 요소에 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;
}

어떻게든 이 모든 해결책들은 저에게 효과가 없었습니다.분명히 IE 버그가 있습니다.flex-direction:column.

제거한 후에야 작동했습니다.flex-direction:

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

제가 발견한 가장 쉬운 해결책은 경계를 벗어나는 요소에 최대 너비인 100%를 추가하는 것입니다.회전목마와 같은 것에 사용하는 경우 최대 너비 속성을 가진 클래스를 추가해야 합니다.

.grandparent{
   display: table;
}

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

이것은 저에게 효과가 있었습니다.

제안된 솔루션은 제가 더 복잡한 마크업을 했기 때문에 ".child {width: 100%;}"에 도움이 되지 않았습니다.하지만 "align-tems: 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>

이 유연한 방향 열 버그를 100% 일관되게 방지할 수 있는 유일한 방법은 최소 너비 미디어 쿼리를 사용하여 데스크톱 크기 화면의 하위 요소에 최대 너비를 할당하는 것입니다.

.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> 다른 할 수 있습니다 인라인이 아닌 다른 항목으로 이동하여 수정 작업을 수행합니다(예를 들어옵니다.

저도 이 문제에 직면했습니다.

유일한 대안은 자식 요소에서 너비(또는 최대 너비)를 정의하는 것입니다.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>

여기서 해결책을 찾지 못했습니다. 누군가 유용하게 사용할 수 있을 것입니다.

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

행운을 빕니다.

플렉스 포장지에 이미지가 넘쳐나는 것과 비슷한 문제가 있었습니다.

둘 중 하나 추가flex-basis: 100%;또는flex: 1;나를 위해 일하는 넘쳐나는 아이에게.

간단한 솔루션도 작동하는데 왜 복잡한 솔루션을 사용합니까?

.child {
  white-space: normal;
}

언급URL : https://stackoverflow.com/questions/35111090/text-in-a-flex-container-doesnt-wrap-in-ie11