2022-10-04 TIL Flex break line, word-wrap && word-break, scrollbar width

 

이런식의 flex 1 - 2 - 2 짜리 Flexbox면서, flex item이 overflow했을때 line break해주는 것을 구현했었는데 생각보다 애를 먹었었다.

overflow가 되지 않고 flexbox 자체가 깨졌기 때문...

 

이렇게 되는 이유는 flex-item의 기본 min-width는 auto인데, auto인 경우에는 기본적으로 content의 min-width가 되기에 더 작아지지가 않음. 그래서 깨졌던 것인데, min-width를 0으로 설정해주면 width가 줄어들수 있으므로 overflow가 정상적으로 된다.

 

혹은 word-break:break-all 속성을 사용해도 된다.

 

조심해야할점은 word-wrap 속성을 사용하면 의도대로 되지 않을수도 있다는 것

work-wrap: break-word를 하면 이렇게  개행된다.

word-break과 word-wrap

word-break과 word-wrap은 비슷하지만 다른 옵션임.

 

word-wrap은 긴텍스트를 개행할지/말지

word-break은 개행을 어떻게 할지

 

를 정해주는 속성이다.

 

word-wrap:normal 일때는 한중일(CJK라고 하더라)에 대해서는 음절단위로 자동개행이 되지만 non-CJK 언어에 대해서는 개행을 시켜주지 않는다.

 

word-wrap:break-word 인 경우에는 non-CJK 언어에도 개행을 시켜줌.

 

 

 

word-break은 normal, break-all, keep-all이 있는데

 

break-all은 음절로 개행을 함

keep-all은 공백(즉 단어 단위)로 개행을 함

 

그러나 normal 인 경우에는 CJK/non-CJK가 개행 방식이 다르다.

non-CJK인 경우에는 공백(keep-all과 동일)

CJK인 경우에는 음절(break-all과 동일)

하다.

 

기본적으로는

 

영어(non-CJK)일 경우에는 개행을 안 시켜주거나, 단어 단위로 시켜주거나

한글(CJK)이면 음절단위로 무조건 개행 시켜줌

 

이라고 생각하면 될거 같다... 헷갈림....

 

 

scroll bar width

 

Scrollbar가 있음에 따라서 padding이 생겨 width가 변하는 일이 발생함.

 

찾아보다라 scrollbar-gutter라는 재밌는 property를 발견함

 

stable이라는 옵션은 콘텐츠 크기(스크롤바 출현)과 상관없이 스크롤바의 공간을 확보해줌. 그래서 안정적(stable)이라는 의미임.

 

both-edges 는 양쪽에 균일한 gutter를 생성시켜줌. 그림으로 보는게 이해가 훨씬 빠른데

 

한쪽으로 치우쳐진 스크롤바를 가지고 있었지만, both-edges를 통해 양쪽으로 균일한 여백을 갖게 해줌.

 

 

 

그러나 나의 경우에는 이 property를 쓸수 없었는데, 어쨋든 padding이 생기고, 그것에 영향을 받는 엘리먼트가 있었기 때문임...

 

그래서 그냥 negative margin을 scrollbar width만큼 content에 주는 식으로 해결했음.이런 식으로 해결하는게 뭔가 tricky한 느낌이라 다른 방식을 찾아봤는데 찾기 힘들다 ㅠㅠ