flex with text-overflow: ellipsis

flex containr 안에 두개의 flex-item 이 존재할 때,

1번 아이템에 내부 컨텐츠(텍스트)가 길어질 경우, 2번은 줄어들지 않고 1번에서만 '...' 표기되게 하려고 한다.

 

무슨 이유에선지 다른데에서 아무문제 없이 사용되던 코드가 flex-container의 넓이가 충분함에도 불구하고 첫번째 아이템이 ... 처리되었다.

 

적용한 css는 아래와 같다.

 

.flex-container {
  display: flex;
}
.flex-item1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flex-item2 {
  flex-shrik: 0;
}

 

크롬에서는 원하는 대로 적용이되는데 유독 safari에서는 위의 첨부한 이미지처럼 보여져서 제대로 나오지 않았다.

 

아래의 내용은 찾고 찾다가 발견한 방법

.flex-container {
  display: flex;
}
.flex-item1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  
  &:after {
    content: "\0000a0";
    display: inline-block;
    width: 0;
  }
  
}
.flex-item2 {
  flex-shrik: 0;
}

으아..... 당최 크롬에서는 정상적으로 적용됬는데 사파리에서만 저렇게 보였는지 아직도 모르겠다.... 

으 골치야....

 

심지어 어떤건 safari에서도 정상적으로 적용됬는데 정상 적용된 것과 그렇지 않은 것의 차이는 정상 적용된것은 대소문자를 함께 입력한 거였고 제대로 적용되지 않은 것은 대문자로만 이루어진 텍스트였다.

 

참내.. 아직도 어이가 없는 중...

 

아무튼 누구신지 몰라도 감사하는 마음으로 오늘 하루를 후련하게 마무리 함~~ 끝~~~

 

 

Thanks to : https://stackoverflow.com/questions/35012943/text-overflow-hides-text-when-it-shouldnt-in-safari